How does this Work?

**jcbrady** · 12-24-2006, 06:28 PM

Thanks for the great website. I'm somewhat new to CSS positioning and I'm baffled by some code that is used in the 3 column fixed layout template http://www.dynamicdrive.com/style/la...d-fixed-fixed/. Not that I can't get it to work, but I can't figure out WHY it works. This code for example uses a negative margin that is the same width as the Maincontainer:

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

Why does the negative margin-left make this thing work? It seems like it would just move it completely out of view. Can anyone explain?

thanks again,

John

**motormichael12** · 12-24-2006, 06:50 PM

The left column is connected to the center, it is just another div... the negative margin moves the column out, otherwise it would mess up how it looks... basically it is not in its own area, it is part of the center column...

Code:

<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>

Everything is contained in the center column, the margin is - so that it will move it away, otherwise it tries to put it in the main column, messing up the configuration of the columns.

I am not too experienced with CSS but I understand that, maybe someone wiht more css experience cna explain it better.

**mwinter** · 12-24-2006, 08:43 PM

Originally Posted by jcbrady

Thanks for the great website. I'm somewhat new to CSS positioning and I'm baffled by some code that is used in the 3 column fixed layout template http://www.dynamicdrive.com/style/la...d-fixed-fixed/.

It's an odd approach, which is perhaps why it doesn't work quite as intended in earlier versions of Opera and Mozilla. A more conventional approach of floating the left column left, and the right column right, might be preferable.

Not that I can't get it to work, but I can't figure out WHY it works.

The tendency for the flanking columns is to position themselves to the immediate right of the float that contains the central column (#centerwrapper). However, as this element takes up all available horizontal space, the right-hand edges of the columns would protrude from the right-hand side of their container. This isn't permitted so the outer columns both would normally move below that element.

A negative margin moves an element opposite to the direction of a positive value for the same property; a negative value for the margin-left property removes space on the left-hand side, rather than adding it. As the negative margins move the right-hand edge of the flanking columns sufficiently left, neither wraps any more.

Mike

**jcbrady** · 12-25-2006, 02:57 AM

Thanks, this is makeing more sence!

A negative margin moves an element opposite to the direction of a positive value for the same property

It would seem that if one element was taking all the space of the container, the following element would automatically wrap to the next line, without the need for a negative margin. Nonetheless, it works... so good trick to know.

Why not do something more simple instead?:

#maincontainer{
width: 840px;
margin: 0 auto;
}

#header{
height: 50px;
width: 100%;
}

#leftcolumn{
float: left;
width: 150px; /*Width of left column*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 150px; /*Width of right column*/
background: #FDE95E;
}

#content{
float: left;
width: 540px; /*Width of content*/
background-color: #003300;
}

#footer{
width: 100%;
background-color: #333333;
clear: both;
}

<body>
<div id="maincontainer">
<div id="header">header</div>
<div id="leftcolumn">leftcolumn</div>
<div id="content">content</div>
<div id="rightcolumn">rightcolumn</div>
<div id="footer">footer</div>
</div>
</body>

What's the advantage of doing it with negative margins?