rarebit Posted October 13, 2008 Share Posted October 13, 2008 Thought this would be simple: Basically the issue lies within the 'header_right' section: <html> <head> <style type="text/css" media="all"> html { margin: 0px; padding: 0px; } body { background: #ffffff; color:#efefef; font-family: arial,helvetica,geneva,sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #header_left { width: 220px; height: 200px; background: #ff0000; float: left; margin: 1px; } #header_centre { width: 400px; height: 200px; background: #00ff00; float: left; margin: 1px; } #header_right { width: auto; height: 200px; background: #0000ff; /*position: relative;*/ /*position: absolute;*/ /*right: 0px;*/ /*float: right;*/ margin: 1px; margin-left: 640px; /*padding-left: 640px;*/ } </style> </head> <body> <div id='header_wrap'> <div id='header_left'>Header left</div> <div id='header_centre'>Header centre</div> <div id='header_right'>Header right</div> </div> </body> </html> What i'm trying for is a 3 column layout within another layer, all with a 1px margin... But essentially the right hand column needs to fill the remainder of the width and not shove when the page is made narrower (would like a min width for it).... Cheers Quote Link to comment Share on other sites More sharing options...
rarebit Posted October 13, 2008 Author Share Posted October 13, 2008 Other than the width issue, which is essential, this handles the positioning: #header_right { width: auto; min-width: 200px; height: 200px; background: #0000ff; float: left; margin: 1px; } But i'd still like it to fill the spare width... Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted October 13, 2008 Share Posted October 13, 2008 I'm not sure exactly what you are trying to make, in any case applying a min-width of 820px seam to solve the problem where your division goes below when the browser-window is made smaller. #header_wrap { min-width: 820px } you should also include a valid doctype, i recommend HTML 4.01 Strict. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Quote Link to comment Share on other sites More sharing options...
rarebit Posted October 13, 2008 Author Share Posted October 13, 2008 I'm after it expanding to the given width. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 13, 2008 Share Posted October 13, 2008 width:100%;float:right; should get it to fill whatever space isnt taken up by other elements Quote Link to comment Share on other sites More sharing options...
rarebit Posted October 14, 2008 Author Share Posted October 14, 2008 it seems to either go behind or in front of the others, or it starts after (or on next line) and is the width of the page... this is the last thing I need to master to leave html behind. would you mind using the example and amend to a working version, i've even just retried and it went onto the next line... merci Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 14, 2008 Share Posted October 14, 2008 do you have a link i have time and im bored so i can write the code im just trying to make sure i know what you need im pictureing a full width page with 3 columns left-----------center--------right----------------------------------- Fixed Width|||Fixed Width|||Fills entire space remaining Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 14, 2008 Share Posted October 14, 2008 http://dropfaithproductions.com/current.html <style> #wrapper {min-width:800px;width:90%;margin:0 auto;} #col1 { float: left; width: 20%; height:200px; margin-left: 1%; display: inline; border:1px solid #f0f; } #col2 {height:200px;width:32%; float: left; border:1px solid #000; width: 30%; margin-left: 1%; } #col3 { float: right; border:1px solid #f00; width: 46%; height:200px; margin-left: 1%; } </style> <body> <div id="wrapper"> <div id="col1"></div> <div id="col2"></div> <div id="col3"></div> </div> </body> Quote Link to comment Share on other sites More sharing options...
haku Posted October 14, 2008 Share Posted October 14, 2008 3-column layouts are notoriously difficult to get right. I have found the method in this article to be one of the best: http://alistapart.com/articles/holygrail It uses fairly little markup, and is cross-browser compatible. 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.