4 Replies - 131 Views - Last Post: 14 August 2019 - 10:26 AM

#1 gorfl   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 13-August 19

newbie problem with break between div and table

Posted 14 August 2019 - 07:02 AM

I'm playing with HTML, CSS, and jquery and can't find a solution for a basic problem(maybe I am searching for the wrong phrase with google)

how can I achieve that my table is under my divs and not next to them?

the part of the code is as follows:

<body>
 	<div>don't worry</div>
	<div>be happy</div>
	

	<table style="text-align: left; width: 500px;">
<tbody>
<tr>




can i do that in my html file or in .css?

break doesn't work

Is This A Good Question/Topic? 0
  • +

Replies To: newbie problem with break between div and table

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: newbie problem with break between div and table

Posted 14 August 2019 - 07:04 AM

View Postgorfl, on 14 August 2019 - 04:02 PM, said:

how can I achieve that my table is under my divs and not next to them?

Don't modify the divs' display CSS property.

This post has been edited by Dormilich: 14 August 2019 - 07:04 AM

Was This Post Helpful? 0
  • +
  • -

#3 gorfl   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 13-August 19

Re: newbie problem with break between div and table

Posted 14 August 2019 - 07:22 AM

i think i didn't modify that div property

here is my css code

body {
  background-color: #ffe5af;
}
     div {
            width: 300px;
            height: 300px;
            margin: 20px;
            float: left;
        }
        .one {
            background-color: green;
        }
        .two {
            background-color: red;
        }


table {
width: 40em;
border: solid #000000;
border-collapse:collapse;
}
th, td {
border: solid #000000;
}



Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: newbie problem with break between div and table

Posted 14 August 2019 - 07:33 AM

ok, but you used float, which has a similar effect.

there are a couple of options to solve this ...

the first step would be to use semantical markup. that means to use a HTML structure that makes sense with your data. looking at your intended layout it would make sense to group the two divs together since they seem to have no relation to the table. For that you could use CSS Grid or a wrapper element. If you don't want to use CSS Grid, I recommend to use display instead of float as the latter has some other effects you don't want here (because the purpose of float is to re-arrange text, not blocks of content).

This post has been edited by Dormilich: 14 August 2019 - 07:36 AM

Was This Post Helpful? 0
  • +
  • -

#5 gorfl   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 13-August 19

Re: newbie problem with break between div and table

Posted 14 August 2019 - 10:26 AM

tnx for your fast replys

i have used display: inline-block;

works perfectly
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1