View Full Version : Left Column Issue with Fixed Layout #3.1

01-31-2007, 05:03 PM
1) Script Title:
CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)

2) Script URL (on DD):

3) Describe problem:

When I inserted the CSS the left column was not visible:

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

To correct this I changed the margin-left from -840 to -839.

Can anyone explain this to me and if making changes like that will be a problem later on that I do not see.

Are there certain things in the CSS you should never change to maintain the integrity of the code?

I'm a newbie to CSS and I'm sure someone else will find this helpful?



01-31-2007, 05:04 PM
When your margins are negative, they quite literally go off the page. So obviously it won't be visible. Change it to:

margin:0px or something to that affect.

01-31-2007, 05:44 PM
After changing column colors and changing the center column color to white; now there is a 1px white line running down the outside edge of the left column. How can I fix that? Thanks for your help.
Here is my CSS:
<style type="text/css">

line-height: 1.5em;

b{font-size: 110%;}
em{color: red;}

width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/

background: #D0D0D0;
height: 90px; /*Height of top section*/

#topsection h1{
margin: 0;
padding-top: 15px;
background-color: #D0D0D0;

float: left;
width: 100%;

margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

float: left;
width: 180px; /*Width of left column in pixel*/;
margin-left: -839px; /*Set margin to that of -(MainContainerWidth)*/;
background: #B7B7B7;

float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #B7B7B7;

clear: left;
width: 100%;
background: 999999;
color: #999999;
text-align: center;
padding: 4px 0;
background-color: #999999;

#footer a{
color: #FFFF80;

margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;