One div float left, two divs float right in HTML5

Question

I've seen a solution in part here... how to float two divs beside one div? ... but if you alter the div order to B, C, A (see http://jsfiddle.net/4Jpts/3/) it breaks.

My setup:

<div id="page">
  <header></header>
  <nav></nav>
  <section></section>
</div>

Header and Nav should float right underneath one another, Section should float left.

Also, I'd prefer not to wrap additional divs around the HTML5 tags.

Currently trying to solve this myself but wondered if anyone had any suggestions?

Thanks,

Steve

Answer 1

why not just rearrange your nav,section, header to be like (using your current css)

<div id="mainContainer">
    <div id="divA"></div>
    <div id="divB"></div>
    <div id="divC"></div>
</div>

but if you just want to have it with that arrangement check my fiddle http://jsfiddle.net/4Jpts/9/

what i basicaly did was to delete the left float from divA and clear what was on the right of divC

Answer 2

you may have some choices like entering <br> tags. but wrapping your third div in another div is the best thing you can do, and will work fine with all browsers.

#mainContainer{ overflow:hidden; }
#divA{ float:left; width:60%; background:red; height:500px; }
#divB{ float:right; width:35%; background:yellow; height:200px; margin-bottom:20px}
#divC{ float:right; width:35%; background:blue; height:100px }


<div id="mainContainer">
    <div id="divB"></div>
    <div id="divC"></div>
    <div>
    <div id="divA"></div>
   </div>
</div>

I have used lots of choices but wrapping in a container is something you can trust not to get out of shape in any browsers or newer versions of the browsers yet to release.

Answer 3

I hope I got the right image of what you're trying to achieve. http://jsfiddle.net/4Jpts/10/

<div id="mainContainer">
 <div id="divA"></div>
 <div id="divB"></div>
 <div id="divC"></div>
</div>

You need to use clear.

#mainContainer { 
overflow:hidden;
}

#divA { 
float:right; 
width:60%; 
background:red; 
height:500px; 
}

#divB {
float:right; 
width:35%; 
background:yellow; 
height:200px; 
margin-bottom:20px;
clear:right;
}

#divC { 
float:left; 
width:35%; 
background:blue; 
height:100px; 
clear:both;
}