CSS with 3 columns

KevinCB · 23 Feb 2007 at 14:34

Hi,

I am having difficulty trying to create a page with 3 columns in CSS.
This is how the page currently looks, click here.

As you can see it doesn't seem to wrap properly

I have set up the page with an outer and inner div, so I can get a border.
And the inner div contains a header, top navigation, left navigation, right bar, content and footer.
I would like the header, top navigation and footer to fill the width of the inner div.
And the content to fit between the left and right divs.

This is how my css looks:

Code:

#outer {
	background-color: #CCCCCC;
	padding: 20px;
}

#inner {
	border: 1px solid black;
}

#header {
	height: 70px;
	background-color: #FFFFFF;
	font-family: "Lucida Sans";
	width: 100%;
	padding-left: 10px;
}

#topnav {
	height: 25px;
	background-color: #000000;
	font-family: Pristina;
	font-size: 20px;
	color: #FFFFFF;
	width: 100%;
	padding-left: 10px;
}

#leftnav {
	width: 175px;
	height: 300px;
	float: left;
	background-color: #575757;
	color: #FFFFFF;
}

#content {
	margin-left: 176px;
	background-color: #FFFFFF;
}

#rightbar {
	width: 175px;
	height: 300px;
	float: right;
	background-color: #000000;
	color: #FFFFFF;
}

#footer {
	height: 35px;
	width: 100%;
	background-color: #FFFFFF;
	text-align: center;
}

My html:

Code:

<body>
	<div id="outer">
		<div id="inner">
			<div id="header">
				<h1>My Test Site</h1>
			</div>
			<div id="topnav">
				Link 1 | Link 2 | Link 3
			</div>
			<div id="leftnav">
				<br />
				<ul>
					<li>Link 1</li>
					<li>Link 2</li>
					<li>Link 3</li>
				</ul>
			</div>
			<div id="rightbar">
				<p>Extra bar on the right.</p>
			</div>
			<div id="content">
				<p>The content goes in here.</p>
			</div>
			<div id="footer">
				&copy; My Test Site 2007
			</div>
		</div>
	</div>
</body>

Could anyone help.

Cheers

KevinCB · 23 Feb 2007 at 16:02

shine said:
What browsers have you tested in?

IE 6, looks worse in Firefox.

I've uploaded it to my webhost now, click here.

KevinCB · 25 Feb 2007 at 11:58

Thanks Mickey, I did try what you suggested, but it still doesn't seem correct in IE.

Pr0t0c0L said:
if you want i can rewrite a layout which is crossbrowser
and ff1+ ie5.5 , ie6 , ie7 compliant and xhtml strict

If you don't mind.
I was wondering if it is because I haven't used the position properties for my divs, never been good at that tbh.

KevinCB · 26 Feb 2007 at 11:24

OK, I've been browsing the net and came across the A List Apart 3 column layout sample, which is XHTML strict.

I've been implementing the structure as mentioned in the article, and now I can get it running prefectly in Firefox, but still not perfectly in IE6.

The left column seems to be completly missing in IE6, but shows perfectly in FF, I have to reduce the IE window before it shows, click here to see what I mean.

What seems to be causing this issue in IE6?

Here is my CSS:

Code:

/* CSS Document */

#body {
	min-width: 550px; /* 2x LC width + RC width */
}

#container {
	padding-left: 200px; /* LC width */
	padding-right: 150px; /*RC width */
}
#container .column {
	position: relative;
	float: left;
}

#header {
	height: 70px;
	background: #FFFFFF;
	width: 100%;
}

#topnav {
	height: 25px;
	font-size: 20px;
	background-color: #000000;
	color: #FFFFFF;
	width: 100%;
}

#leftnav {
	width: 200px; /* LC width */
	right: 200px; /* LC width */
	margin-left: -100%;
	background-color: #443417;
	color: #FFFFFF;
}

#content {
	width: 100%;
	background-color: #FFFFFF;
}

#rightbar {
	width: 150px; /* RC width */
	margin-right: -150px; /* RC width */
	background-color: #000000;
	color: #FFFFFF;
}

#footer {
	clear: both;
	height: 35px;
	width: 100%;
	background-color: #FFFFFF;
	text-align: center;
}

/*** IE 6 Fix ***/
* html #left {
	left: 150px; /* RC width */
}

Click here to go to the uploaded pages.