The Muffin Man The Muffin Man - 1 month ago 10
CSS Question

How to properly float two columns side by side with css

This is one of those things I learned a long time ago and never thought much about if I was actually doing it the right way.

Let's say we have a structure like so:

<div id="wrapper">
<div id="sideBar"></div>
<div id="mainContent"></div>
</div>


Let's also say that
wrapper
has a width of
600px
.

Should I float
sideBar
left
, and
mainContent
right
, or should I float them both
left
?

Additionally, if I set a fixed width for
sideBar
how can I make
mainContent
fill up the rest of the space similar to how a table works? If I set
mainContent
to
display:inline-block
and
width:100%
it moves down onto the next line :/

Note: In my specific scenario I do not want to use a table.

Answer

You display:block along with float:left to float divs next to each other.

Check working example at http://jsfiddle.net/FhL4u/2/

To make mainContent fill up rest of the space if only the first div width is known then use percentages on both sideBar and mainContent ex: 20% 80% instead of using fixed width. otherwise you will need a JavaScript solution to achieve a cross browser compatibility.

Check jQuery solution at http://jsfiddle.net/FhL4u/3/

Comments