Home/ Questions/Q 997137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:59:04+00:00

I’ve been trying to get this right for the last 3 days now… All

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0