coast917 Posted July 16, 2007 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted July 16, 2007 Share Posted July 16, 2007 you may need the faux columns approach... http://www.alistapart.com/articles/fauxcolumns/ Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted July 18, 2007 Share Posted 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/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.