easiest 2-column layout with fixes

Forum Moderators: not2easy

Message Too Old, No Replies

easiest 2-column layout with fixes

css 2 column layouts

nquinn

7:12 pm on May 22, 2005 (gmt 0)

Hi all,

I've been digging through several sites to find a good 2-column layout with CSS.

Does anyone have a good stripped down example?

Here's what I'm looking for:

top header
status bar underneath with nav
left and right-column layouts
footer

all centered for about 750px or so.
The navigation must span the entire length of the content, and vice versa.

Should work in IE5/5.5/6 and firefox... don't really care about old NN4.

I know there's a ton of sites out there, but most have tons of extra stuff built in that I don't really need. I'm looking for the most simplified html/css combination possible.

Help!

-Neil

Krapulator

1:38 am on May 23, 2005 (gmt 0)

How about something like this:

<html>
<head>
<style type="text/css">
#Container{
width:750px;
position:absolute;
top:0;
left:50%;
margin-left:-375px;
}
#header{
background: pink;
}
#nav{
background: brown;
}
#content{
background: #fff url(bg.gif) repeat-y;
float: left;
}
#rightColumn{
float: right;
width: 530px;
}
#leftColumn{
width: 200px;
float: left;
}
#footer{
background: green;
}
</style>
</head>

<body>

<div id="header">This is the header</div>

<div id="nav">This is the nav bar</div>

<div id="content">
<div id="rightColumn">This is the right column</div>
<div id="leftColumn">This is the left column</div>
</div>

<div id="footer">This is the footer</div>

</div>

</body>
</html>

bg.gif should be 750px wide x 1px high with the left 200px (or whatever the width of your left column is) coloured with the desired background colour of the left column and the remainder coloured with the desired background colour of your right column.

Ive used a horrible colour scheme so you will clearly see where each section sits.

Mr Bo Jangles

3:42 am on May 23, 2005 (gmt 0)

I've just loaded that up Krapulator, thank you.
Now for my purposes, I want to swap the left & right columns - or rather their widths - I'm guessing that won't break it?, also, if I want to add some padding around the text, or probably in all of the Divs, will that break anything?

thanks,

Mr Bo

Krapulator

4:15 am on May 23, 2005 (gmt 0)

Changing the widths should have no negative effects. Obviously you will need to change the bg.gif to reflect your new width values.

You can add margin, padding and borders and whatever else you like. The only thing to be careful of is adding too much padding and/or margins to the left and right columns which will make their combined width greater than the size of the main container. This will cause one column to fall below the other one.

Mr Bo Jangles

4:29 am on May 23, 2005 (gmt 0)

OKkkk, sounds good - must say it is v. uncomplicated! - well done.

Mr Bo

Mr Bo Jangles

11:01 am on May 23, 2005 (gmt 0)

I was almost there.
And was just tweaking the Footer, and am having real trouble with the Footer behaving in Firefox(PC).
In IE, it looks like I expect(which is always a bit of a worry!) - there is a background img for the Footer Div, and some text in the Footer - but in Firefox, the bg image is not seen - for some reason.

Be grateful if someone can see why.

thanks,

Mr Bo
____________________

body {
background-color : #71828A;
margin: 0px 0px 0px 0px;
height:100%;
padding: 0px 0px 0px 0px;
font:11px verdana;
}

#container{
width:756px;
position:absolute;
margin: 0px 0px 10px 0px;
top:0;
left:50%;
margin-left:-378px;
}

#menu{
background: url(img/navbar1.gif);
padding: 9px 0px 0px 0px;
margin: 25px 0px 0px 0px;
height: 40px;
background-repeat: no-repeat;
}

#subimage{
background: #71828A;
padding:5px 0px 10px 0px;
margin:0px 0px 0px 0px;
}

#menu a {
padding:4px 10px;
text-decoration:none;
font-weight:bold;
color: Maroon;
}
#menu a.hover {
background-image: url(img/navbarhover1.gif);
background-repeat: repeat-x;
}

#content{
background: White url(bg.gif) repeat-y;
float: left;
}

#leftcolumn{
padding: 10px 10px 10px 20px;
width: 480px;
float: left;
}

#rightcolumn{
padding: 15px 10px 10px 10px;
float: right;
width: 180px;
}

#footer{
background: url(img/footerbg2.gif);
font: 10px/4px verdana;
background-repeat: no-repeat;
padding: 1px 0px 5px 0px;
margin: 20px 0px 10px 0px;
text-align: center;
color: Silver;
font-weight: normal;
}

Mr Bo Jangles

10:24 pm on May 25, 2005 (gmt 0)

I seem to have a 'fix' to the problems I was experiencing.
Things resolved when I added a clear: left
command to the Footer: