CSS Position Divs Horizontally in Reversed Order

Question

I have a document that looks like

<div id="content">
   <p> blah </p>
</div>

<div id="menu">
   <p> blah2 </p>
</div>

<div id="footer">
   <p> Copyright </p>
</div>

The content div is after the menu div, but is it possible to have the layout displayed like so:

-------------------
| Menu  | Content |
|       |         |
|       |         |
-------------------
| Footer          |
-------------------

How do you swap their order? And I'd rather not use absolute positioning.

Answer 1

try float:right; on each of them.

Answer 2

I would do the float right on menu and content then a clear both on the footer after setting the width to 100%.

Answer 3

Try some css like this:

#menu {
  float:left;
}
#content {
  float:right;
}
#footer {
  clear:both;
}

Answer 4

Can you alter the HTML code, if that is possible I would do:

<div id="wrapper">
   <div id="menu">
     <p>Blah</p>
   </div>
   <div id="content">
     <p>Blah</p>
   </div>
</div>
<div id="footer">
   <p>Blah</p>
</div>

And style it with:

#wrapper { overflow: hidden; }
#menu { float: left; width: 40%; /* Any size u want */ }
#content { float: left; width: 60%; /* Any size u want */ }

I guess you cant and it is therefore you ask, then I would do as the others say:

#menu { float:right; }
#content { float: left; }
#footer { clear: both; }

Answer 5

One problem with the float:right/float:left solutions is the gap between the elements you have to take care of, plus the extra container div.

Another way to do it is:

#content, #menu{
  position: relative;
  float: left;
}
#menu    { right: 500px; }
#content { left: 100px; }
#footer  { clear: both; }

Where 500px is the width of the content, and 100px is the width of the menu. That solution requires relative positioning and fixed width divs.