CSS with 3 columns

KevinCB

KevinCB

KevinCB

Associate
Joined
20 Jan 2005
Posts
386
Location
Crewe, Cheshire
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
 
Code: 
/* CSS Document */

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

#inner {
	border: 1px solid black;
}

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

#header h1
{
margin-left:10px;
}

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

}

#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 {
clear:both;
	height: 35px;
	width: 100%;
	background-color: #FFFFFF;
	text-align: center;
}
Fixes the layout in firefox, not tested in anything else. You'll need to put the #topnav links in some other container and put a left margin on that to get the padding back.
 
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 :p
Click to expand...

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 said:
Thanks Mickey, I did try what you suggested, but it still doesn't seem correct in IE.



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.
Click to expand...

ok il do that, but first i woudnt mind a wireframe, or photoshop mockup of how you want it too look with annotations, so i can makesure the template i do is what you want
 
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.
 
You must log in or register to reply here.
Back
Top Bottom