CSS Creator Fixed width version of the holy grail 3 column

Posted: Thu, 2008-07-24 16:32

Hello,
I've tried to edit the improved holy grail 3 colum layout from A List Apart so that it is a fixed width layout. I tested it on Browser Shots and it works with all browsers except IE 5.5 and IE 6 (big suprise). Valid CSS 2.1 and XHTML 1.0

I attached two screenshots; the browsershot-works.png is in Firefox 3, browsershot-broken.png is in IE 6.
Thanks in advanced for any help you can offer!

My XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>3 column test</title>
	<link rel="stylesheet" type="text/css" href="styles2.css"  />
</head>

<body>
<div class="bkgwrap">
<div id="wrap">

	<div id="header"></div>
    <div id="banner">
        <img src="images/banner.png" width="864" height="280" alt="" />
    </div>

	<div id="center" class="column">
		<h1>This is the main content.</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
	</div>

	<div id="left" class="column">
		<h2>This is the left sidebar.</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	</div>

	<div id="right" class="column">
		<h2>This is the right sidebar.</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	</div>
    </div>
	<div id="footerspace"></div>
	<div id="footer"><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS 2.1</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a></div>
    <div id="footertail"></div>

</div>

</body>

</html>

My CSS (styles2.css):

body {
	margin: 0;
	background: #f4f4f4 url(images/tile_page_n.png) top center repeat-y;
}

.bkgwrap {
	width:100%;
	background: url(images/tile_page.png) top center repeat-y;
}

#wrap{
	width:864px;
	margin:0 auto;
	background: #f4f4f4 url(images/tile_page.png) top center repeat-y;
}

#header {
	width:864px;
	height:110px;
	background:url(images/tile_header.png) top left repeat-x;
}

#banner {
	clear:both;
	width:864px;
	height:280px;
	margin:0 auto;
}

.column {
	position: relative;
	float: left;
}

#center {
	padding: 0 10px;
	width: 484px;
	margin-left:170px;
	background:#fff;
}

#left {
	width: 150px;
	padding: 0 10px;
	margin-left:-674px;
	background:#e6e6e6;
}

#right {
	width: 170px;
	padding: 0 10px;
	background:#ececec;
}

#footer {
	clear: both;
	width:864px;
	margin:0 auto;
	background:#fff;
}

#footerspace {
	width:100%;
	height:50px;
	float:left;
	clear:both;
	background: url(images/footer_spacer.png) top center no-repeat;
}
#footertail {
	width:100%;
	height:30px;
	float:left;
	clear:both;
	background: url(images/footer_tail.png) top center no-repeat;
}

Attachment	Size
browsershot-broken.png	73.77 KB
browsershot-works.png	82.05 KB

David Laakso

Enthusiast

Posts: 267
Joined: 2008-07-18
Location: US

Correction for XP IE/6.0.

Posted: Thu, 2008-07-24 18:19

Correction for XP IE/6.0. Checked only on a local file. No got 5.5 at the moment...


#center {display:inline;/*add*/}

Fenix

newbie

Posts: 3
Joined: 2008-07-24

thanks

Posted: Thu, 2008-07-24 18:20

Thank you, I will give this a try right away.

Great!

Posted: Thu, 2008-07-24 18:30

That worked! If you come up with anything for IE 5.5, that would be great, but I think I will be moving forward without bothering with IE 5.5 unless there is a simple fix.

Thanks again!

Fixed width version of the holy grail 3 column - broken in IE6

Correction for XP IE/6.0.

thanks

Great!

Online users