Search code examples
csshtmlsemantic-markup

One div float left, two divs float right in HTML5

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

Solution

  • 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