setting two divs side by side and third one below that

Question

How do I setup two div's side by side and the third one below that like this

output .

My current code is as below which puts note div after name div

HTML:

<div id="info_div">
    <div id="info_div_name">Name</div>
    <div id="info_div_time">6:30 PM</div>
    <div id="info_div_note">Note</div>
</div>

CSS:

#contact_table_data {
    width:inherit;
    height:inherit;
    background-color:#99cc33;
    max-width:400px;
}

#info_div_name {
    width:auto;
    height:auto;
    padding: 5px 0px 5px 10px;
    float:left;
}

#info_div_time {
    width:auto;
    height:auto;
    padding: 5px 10px 5px 0px;
    float:right;
}

#info_div_note {
    width:inherit;
    height:auto;
    position:static;
    padding: 0px 10px 5px 10px;
}

Look for child-nth in css. Is a good thing. – Rafael Soufraz Jan 03 '14 at 13:00 — Rafael Soufraz, Jan 03 '14 at 13:00

score 6 · Accepted Answer · answered Jan 03 '14 at 13:01

6

The following code will do. You should have to clear the floats.

#info_div_note {
clear: both;
width: inherit;
height: auto;
position: static;
padding: 0px 10px 5px 10px;
}

answered Jan 03 '14 at 13:01

Green Wizard

3,219
4
16
29

score 2 · Answer 2 · answered Jan 03 '14 at 12:59

2

You need to clear: both;

Add CSS

#info_div_note {
    clear:both;
}

DEMO

answered Jan 03 '14 at 12:59

Satpal

129,808
12
152
166

You don't need `clear:both;` if you use `inline-block` and you don't need `inline-block` if you use `float` – Mr. Alien Jan 03 '14 at 13:01

score 1 · Answer 3 · edited May 23 '17 at 11:44

Add clear: both; before <div id="info_div_note">Note</div> to clear the floating elements, and that will solve your issue.

<div id="info_div">
    <div id="info_div_name">Name</div>
    <div id="info_div_time">6:30 PM</div>
    <div style="clear: both;"></div>
    <div id="info_div_note">Note</div>
</div>

Demo

Now this is not an optimal solution, as you will have to add that clearing div everytime, so better wrap the floated elements inside a div and use clear fix ... So your DOM will be like

<div id="info_div">
    <div class="self_clear">
        <div id="info_div_name">Name</div>
        <div id="info_div_time">6:30 PM</div>
    </div>
    <div id="info_div_note">Note</div>
</div>

And than use a class like

.self_clear:after {
   clear: both;
   display: table;
   content: "";
}

You can refer my answer's here and here for more information

And you won't require static as that's the default element position

score 1 · Answer 4 · answered Jan 03 '14 at 13:00

#contact_table_data {
width:inherit;
height:inherit;
background-color:#99cc33;
max-width:400px;
}

#info_div_name {
    width:auto;
    height:auto;
    padding: 5px 0px 5px 10px;
    float:left;
}

#info_div_time {
    width:auto;
    height:auto;
    padding: 5px 10px 5px 0px;
    float:right;
}

#info_div_note {
    clear: both;
    width:inherit;
    height:auto;
    position:static;
    padding: 0px 10px 5px 10px;
}

Fiddle

setting two divs side by side and third one below that

4 Answers4