scs Posted March 2, 2008 Share Posted March 2, 2008 Hi, Im having trouble with my layout. I hope someone can help! Im trying to recreate my layout from a table. Its a 3 cell layout. The focus is the main center cell. The 2 outer cells are just to hold background images to spice up the layout. Some like this: The thing about it that makes it complex is the center cell width is 900px and the two out cells are suppose to fill up the space thats left over. So the center cell with all the content stays in the center of the page and stays the same width. The 2 out cells expand to fill the empty space for every resolution. So a static width will not work unless the rest of the cell is hidden and doesnt obstruct the main content. Here is what I got so far which such bad cause its all messed up. .main { width: 900px; background-color: #666666; margin-right: auto; margin-left: auto; height: 100%; position: absolute; top: 0px; left: auto; right: auto; } .leftb { overflow: hidden; height: 100%; float: left; display: block; background-image: url(/images/theme/black/background_03.gif); background-repeat: no-repeat; background-position: top; position: absolute; left: 0px; top: 0px; width: auto; } .rightb { background-image: url(/images/theme/black/background_04.gif); background-repeat: no-repeat; background-position: left top; overflow: hidden; height: 100%; width: auto; position: absolute; top: 0px; right: 0px; } <div class="leftb"> </div> <div class="main">Main content</div> <div class="rightb"> </div> Does anyone know what im doing wrong? Im still new to tableless CSS Hope someone knows more than me! thnx Zach Quote Link to comment Share on other sites More sharing options...
haku Posted March 2, 2008 Share Posted March 2, 2008 Maybe one of these can help: http://www.glish.com/css/7.asp http://www.pixy.cz/blogg/clanky/css-3col-layout/ http://www.neuroticweb.com/recursos/3-columns-layout/ Quote Link to comment Share on other sites More sharing options...
scs Posted March 2, 2008 Author Share Posted March 2, 2008 Nope, sry that didnt help. All 3 of those links have static widths for the 2 outer cells. One of them was the exact opposite of what I want Thnx for trying though! Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 2, 2008 Share Posted March 2, 2008 First, make sure you use a proper doctype and that your code is valid. What you are attempting requires IE6 to stay out of quirks" mode. What you want to do is relatively simple. You want a fixed width editable page area with a different graphic for the left and right of the window. So designate the body with one graphic left and make a container the size of the window with a graphic right. Since these are main page layout containers, use id select elements instead of class (you only want to designate them once per page). Of course, without knowing your graphic type or the context of anything else on the page, I can only show you the technique (you will have to tweak paddings, margins, etc. of your main id. Here is the quick code version: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body {width:100.1%; margin:0; background: url(/images/theme/black/background_03.gif) top left no-repeat} #container {width:100.01%; background: url(/images/theme/black/background_04.gif)) top right no-repeat} #main { width: 900px; background-color: #666666; margin:0 auto; } </style> </head> <body> <div id="container"> <div id="main">Main content</div> </div> </body> </html> 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.