CSS Centering 4 Columns, 2 Side by Side. Basic code problem using margins.

markmid

11-23-2005, 01:04 PM

Hey I am fairly new to CSS and I have been working on a structure for my webpage for a few days. I have had some success but I have hit two problems. My overall goal is to have 4 columns 1, header 1, footer and 1 main column beside a left link column.

I am putting margins around the whole thing to be as compatible as possible with as many different computers and resolutions as possible. My margins are working fine and I have the header in place properly and things can be centred fine.

I am struggeling however to put the main column and the left links column side by side without overlapping or having a fixed, pixel position for either of them.

At the moment the margins are set to auto and all the 4 elements wrapped in an ID called wrap :), this automatically sets the margins based on whats left of the browser window, after the set width of the layout has been taken up.

The other problem is getting the footer column to stay fixed at the bottom of the screen, I hear some older IE browser don't support the fixed position term which I currently have used.

------

Below is Code of the CSS Sheet. It has an IE hack to support IE5 browsers but the rest should be fairly clear.

The titles are fairly self explanatory, the parts that are not working is getting div.maincol and div.leftcol side by side with a margin around them.

Also div.footer is the thing i need fixed at the bottom of the screen.

body{
margin:0;
padding:0;
text-align:center; /*ie hack to make sure body stays centre */
}

#pagewidth{ }

#wrap {
width:760px; /* overall width of the layout */
margin:0 auto; /*automatic margins*/
text-align:left; /*ie hack to make sure text stays left*/
}

div.headcol{
width:760px;
top:17px;
position:absolute;
height:136px;

}
/*The links column i am having trouble with*/
div.leftcol{
background-color: #F8F1D7;
top:175px;
width:177px;
position: absolute;
height: 468px;

}

/*The main page column i am having trouble with*/
div.maincol{
background-color: #F8F1D7;
top:175px;
width:580px;
position: absolute;
left:177px;
height: 435px;

}
/*The footer I would like fixed at the bottom of the page. Note it doesn't have to float, just stay at the bottom of the webpage not the browser. Although either is fine*/

div.footer{

width:760px;
position:fixed;
height:50px;
background-color:#809CA3;
bottom:30px;

}

I am guessing the solution is to set another wrap inside the main one but I am unsure how to stucture it so that I can achieve an automatic margin from the main wrap and still have these two elements side by side and centred.

If I fix the two columns at a set place and ignore the centring I wouldn't be able to use automatic margins.

The general code of the important html is:

<html>
<head>

<link type="text/css" rel="stylesheet" href="styles/mainstyle.css">
<title>test page</title>

</head>

<body>

<div id="wrap">

<div class="headcol">

</div>

<div class="leftcol">
</div>

<div class="maincol">

</div>

<div class="footer">

</div>

</div>

</body>
</html>

--------

Thank you all in advance for any help.

markmid

11-23-2005, 01:43 PM

I think I have made some progress I now have.

body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{ }

#wrap {
width:760px; /* Change this to the width of your layout */
margin:0 auto;
text-align:left;
}

div.headcol{
width:760px;
top:17px;

height:136px;

}

div.leftcol{
background-color: #F8F1D7;
top:175px;
width:177px;

height: 468px;
float:left
}

div.maincol{
background-color: #F8F1D7;
top:175px;
width:580px;

sheight: 435px;
float:right

}

div.footer{

width:760px;
position:fixed;
height:50px;
background-color:#809CA3;
bottom:30px;

}

I have had to remove all the positioning statements, So i doubt this is ideal for when the site expands, any thoughts on a better way?

After reading a new post and taking a few idea's, I have also added float, though I am unsure how this has effected the elements individually, as at first the footer and header disappeared till i removed all the positioning statements :)

ronaldb66

11-23-2005, 03:13 PM

I take it your columns all have fixed widths, as does your page in general? This makes it slightly easier, although a fluid arrangement wouldn't be much harder.

Okay, here goes:

You could place a wrapper around the whole page, from header to footer to control a uniform width.
Leave your header in the normal flow; no positioning.
Place a wrapper around the two columns; float this left to "auto-clear" the footer.
Float your left column left.
Float your right column right.
Leave your footer in the normal flow again; no positioning.

Markup roughly like this:
<div id="wrapper">
<div id="header">
...
</div>
<div id="main">
<div id="nav"> 
...
</div>
<div id="content"> 
...
</div>
</div> 
<div id="footer">
...
</div>
</div>

markmid

11-25-2005, 09:17 AM

Thank you for the reply and the help, things are correctly set up now

I am just a bit concerned about sticking with using fixed for the footer position, will it cause any problems with IE in my site design?

markmid

11-25-2005, 09:27 AM

Of course the footer still floats over the text in Firefox which I can use to my advantage, however on reflection it would be preferable to have firefox and IE displaying it in the same way.

Is there anyway to fix it to the bottom of the webpage, rather than the browser window in firefox?

edit - I have tried setting the footer to position:bottom, but this gets the footer column part covered up, if the left hand column extends past the bottom of the screen. Again only in firefox.