Simple 2 column layout

Question

Hi!

I've been trying to get this right for the last 3 days now... All I want is simple 2 column layout on my website with the menu bar on the left. The problem is I can't get the content column to display in line with the menu column. No matter what I try, it only lines up with the menu column's bottom border.

I'd use negative margins, but I don't like the idea of making the menu bar a fixed height. Float and Clear aren't helping at all...

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; }

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; }
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; margin-left: 200px; width: 790px; }

<div class="wrapper">
    <div class="sidebar">
        <ul>
            <li><a href="">Menu Item 1</a></li>
            <li><a href="">Menu Item 2</a></li>
            <li><a href="">Menu Item 3</a></li>
        </ul>
    </div>

    <div class="content">
        <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control -->
        <asp:ContentPlaceHolder...></asp:ContentPlaceHolder>
    </div>

Can someone tell me what I'm doing wrong?

UPDATE: Just to see exactly what's happening, I changed the color of .content and had a look where it is exactly. It seems that the actual block itself is correctly in position, but that the content in that block (the actual content of the page) is at the bottom of the .sidebar block...

Answer 1

This could be because of lack of min-height property, howerver, have a look at:

Super Simple Two Column Layout

The Demo

Or see:

Simple 2 column CSS layout

To get an idea and how to make it cross-browser :)

Answer 2

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; }

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6;}
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; width: 789px;}

This code will work. By having margin-left:200px in .content you made it's width - 200 + 790 + 10 = 1000px. And after removing this I had to decrease width of one of the columns because width of left column was 190+10+1(border) and they couldn't fit into 1000px width .wrapper.

Answer 3

Much of the code is redundant. If you strip out the unnecessary parts, you get a working start:

CSS:

#wrapper { margin-left: 100px; width: 1000px; border: 1px solid #bcbcc6; border-top:none; }
#sidebar { float: left; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; }
#content { padding: 5px; margin-left: 200px; width: 790px; }

HTML:

<div id="wrapper">
  <div id="sidebar">
  </div>
  <div id="content">
  </div>
  <br style="clear:both">
</div>

Note that I turned all wrapper, sidebar, and content into IDs, since they are unique for any given page. Classes are there for being reused several times per page.

Answer 4

You probably don't want to float the content div. The left margin will ensure it clears the menu and that any content beyond the height of the menu is indented accordingly.

Try this...

.wrapper .sidebar { float: left; clear: left; display: block; width: 190px; border-right: 1px solid #b6bcc6; }
.wrapper .content { margin-left: 200px; width: 790px; }

Also, as azram19 noticed, the total width of the menu and content exceeds 1000px. I've removed the padding to fix this. There will still be a 9px gap between your menu (191px wide) and your content (200px left margin).

If you need the padding (e.g. if the divs have background colours or images), make sure you reduce the widths of both divs by 10px.

Answer 5

There's no need for the clear left and rights or the left margin on the content. Also be careful that when you add padding and a border that adds to the overall size of the box. So your 1000 wide wrapper had boxes in it that were wider than 1000 pixels, pushing the content box down. The sidebar is: 190px (width) + (5px padding (both sides)) 10px + 1px (border) = 201px total. I removed the clears and reduced the content column to 789px to compensate for the 1px border on the sidebar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;
 charset=iso-8859-1">
    <title>Untitled</title>
</head>
<body>

<style type="text/css">
.wrapper { 
 margin-left: 100px;
 width: 1000px;
 border-left: 1px solid #bcbcc6;
 border-right: 1px solid #bcbcc6;
 border-bottom: 1px solid #bcbcc6;
 }
.wrapper .sidebar { 
 float: left;
 display: block;
 padding: 5px;
 width: 190px;
 border-right: 1px solid #b6bcc6;
 }
.wrapper .content { 
 float: left;
 position: relative;
 padding: 5px;
 width: 789px;
 }
</style>

<div class="wrapper">
    <div class="sidebar">
        <ul>
            <li><a href="">Menu Item 1</a></li>
            <li><a href="">Menu Item 2</a></li>
            <li><a href="">Menu Item 3</a></li>
        </ul>
    </div>

    <div class="content">
        content
        <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control -->
        <asp:ContentPlaceHolder...></asp:ContentPlaceHolder>
    </div>

</body>
</html>