CSS Layout Help

coast917 · July 16, 2007

I'm trying to convert a site from a table layout to a (hopefully) all-CSS layout.

Everything is going great up until I reached my current state.

This is where it is currently at:

This is where I want it to end up:

As you can see, I need the main content area, which will always be the longest, to force it's size on the left & right content areas. The left isn't quite so important since it shares it's background with the rest of the page. The right side does not though an must stay the same as the center area.

The second thing is that I will need two background images that run the length of the main content are (one on the left, and one on the right). This is show in the "after" picture.

I can't seem to get anything that works. Here is the HTML and CSS code for the "before" layout.

<html>
<head>
<title>Title</title>
<link rel=StyleSheet href="layout.css" type="text/css" />
<body>
<div id="container">
<div id="leftColumn">
	<?= $leftContent ;?>
</div>
<div id="mastHead">
	<?= $mastHead; ?>
</div>
<div id="rightColumn">
	<?= $rightContent; ?>
</div>
<div id="content">
	<?= $content; ?>
</div>
<div id="footer">
	<?= $footer; ?>
</div>
</div>
</body>
</html>

body {
margin: 0px;
padding: 0px;
fo[i]nt-family: verdana, geneva, arial, helvetica, 'sans-serif';
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-decoration: none;
background: #d5d5b2;
}

#container {
min-width: 800px;
}

#leftColumn {
width: 170px;
float: left;
}

#mastHead {
/*background-image: url("/graphics/mastheads/secmastheadback.gif");*/
margin-left: 170px;
}

#content {
min-width: 550px;
margin-left: 170px;
padding: 0px;
background-color: #fff;
margin-right: 185px;
}



#rightColumn {
width: 152px;
float: right;
background-color: #0f0;
padding: 10px;
background-color: #d6c79f;
margin-right: 12px;
}
[/i]
#footer {
width: 100%;
text-align: center;
}

Any ideas? Thanks!

ToonMariner · July 16, 2007

you may need the faux columns approach...

http://www.alistapart.com/articles/fauxcolumns/

dbrimlow · July 18, 2007

This is a losing battle if you have don't have a fixed height for the longest div.

You WILL find ways to make it work in real browsers only. Unfortunately, there is no hack in the world that will make it work in IE.

Here is a great css master who tried - "equal height boxes part II:

http://www.456bereastreet.com/lab/equal_height_ii/

Sign In

CSS Layout Help

Recommended Posts

coast917

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information