Css 2 column layout

Question

I have a basic two-line CSS layout, CSS looks like

#sidebar { width:100px; } #main { margin-left:100px; } 

And some html example

 <div id="content"> <div id="sidebar">some sidebar content</div> <div id="main">some main content</div> </div> 

This works, but it seems repetitive and error prone that the width of the sidebar should correspond to the main value on the left. Is there a better way to do this?

Answer 1

You can use the float property on #sidebar :

 #sidebar { width:100px; float: left; } 

JS script example

---

However, using the method above, if the content of #main causes its height to expand below the #sidebar , it will be wrapped under the sidebar . To avoid this, use the display:table-cell property:

 #sidebar, #main { display: table-cell; } 

JS script example

Answer 2

CSS

 #sidebar { width:100px; float: left; } #main { float: right; } 

HTML

 <div id="content"> <div id="sidebar">my stuff</div> <div id="main">some main content</div> <div style="clear:both;"></div> </div> 

I recommend 960.gs or BlueprintCSS for basic-html / css styles.

Answer 3

You can sidebar inside main by giving main space to the left and sidebar a -ve margin.

 #content{ width: 100%; } #sidebar, #main{ float: left; display: block; } #sidebar{ width: 100px; background-color: orange; margin-left: -100px; } #main{ padding-left: 100px; background-color: green; width: 100%; } <div id="content"> <div id="main"> <div id="sidebar">some sidebar content</div>some main content </div> </div> 

Here is a working demonstration.