I'm stumped. My 3-column layout just won't work.

**theGWS** · Jan 16, 2007 23:34

I'm trying to make a 3-column layout. The left and right columns must be 160px wide and be touching the left and right edges of the page. The center column must adjust width automatically for the browser window and keep a 20px distance from the left and right columns. How do you set the width of the center column? Is what I'm trying even possible with relative positioning?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<style type="text/css">

    * {margin:0; padding:0;}
    
    body {
        font-family: arial, sans-serif;
        font-size: 12px;
        text-align: left;
        color: #666666;
        background: #ffffff;
        margin: 0;
        padding: 0;
    }
    
    #header_top {
        margin: 0 0 30px 0;
        height: 50px;
        width: 100%;
        text-align: center;
        border: solid 1px #000000;
    }
    
    #menu_left {
        margin: 0;
        padding: 0 0 0 10px;
        width: 160px;
        float: left;
        text-align: left;
        border: solid 1px #ff0000;
    }
    
    #center_body {
        margin: 0 180px 0 20px;
        padding: 0;
        width: ???;
        float: left;
        text-align: left;
        border: solid 1px #00ff00;
    }
    
    #menu_right {
        margin: 0;
        padding: 0 10px 0 0;
        width: 160px;
        float: right;
        text-align: right;
        border: solid 1px #0000ff;
    }
    
    .clear {
        clear: both;
        height: 1px;
        margin: -1px 0 0;
    }

</style>

</head>
<body>

    <div id="header_top">THE HEADER. THE HEADER. THE HEADER. THE HEADER. THE HEADER. </div>

    <div class="clear"></div>
    
    <div id="menu_left">THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. THE LEFT MENU. </div>

    <div id="center_body">THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. THE CENTER BODY. </div>

    <div id="menu_right">THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. THE RIGHT MENU. </div>

    <div class="clear"></div>

</body>
</html>

**Kravvitz** · Jan 17, 2007 00:12

What relative positioning? You don't seem to be using it and it is not useful for this anyway.

Why do you need to set a width on the center column?

Why do you feel the need to clear #header_top?

There are better clearing techniques that don't require extra markup. I suggest you read up on clearing and containing floats.

**theGWS** · Jan 17, 2007 08:12

Thanks, all4nerds. The layout is exactly as I want it, however the left column (the navigation menu) doesn't let me click links. I think it's being blocked out by the .x class div.

Kravvitz, why is relative positioning not useful for this?

**theGWS** · Jan 17, 2007 14:24

Works. Thanks you!

**theGWS** · Jan 17, 2007 17:13

What does the margin: 0 -172px; do? What formula did you use to come up with that number?

**markbrown4** · Jan 17, 2007 17:28

negative margins drag a container out of it's normal position. Similar to relative positioning - except I think relative position leaves the space of it's original location occupied - whereas negative margins completely change the location or size of an element in the flow.
The use of negative margins can make for some very interesting effects that can't be accomplished in other ways without resorting to absolute positioning(which has many disadvantages)

margin: 0 -172px; is shorthand for

Code:

margin-top: 0;
margin-bottom: 0;
margin-left: -172px;
margin-right: -172px;

So it makes the left side of a container extend left a further 172px
and the right side of the container extend right a further 172px.

**theGWS** · Jan 17, 2007 17:39

Thanks, but why -172 ??? Of all numbers where did that one come from? I've had to make some subtle changes to the layout and the entire design is completely thrown off. I know this is supposed to be easy, but I cant figure out how these sizes were chosen. Every time I make a change on one thing, then some of the other elements get pushed to the next line.

**markbrown4** · Jan 17, 2007 17:48

It's because of the size of the columns,

Code:

padding:0 0 0 10px;
width:160px;
border: solid 1px #ff0000;

Adding the padding, width, border together gives you the real width of an element. and the magic number 172

10 + 160 + 2(border left and right)

**Kravvitz** · Jan 17, 2007 22:28

theGWS, you may want to read up on the box models.

Originally Posted by theGWS

Kravvitz, why is relative positioning not useful for this?

Like Mark said, relative positioning causes an element to be rendered at on offset from its original position without moving it, so it leaves a footprint. Setting position:relative by itself is not relative positioning. To be relative positioning you must specify a non-zero, non-auto value for at least one of the top, left, right, and bottom properties as well.

User Tag List

Thread: I'm stumped. My 3-column layout just won't work.

Thread Tools

Display

I'm stumped. My 3-column layout just won't work.

Bookmarks

Bookmarks

Posting Permissions