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 Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/ 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... Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664081 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"> Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664127 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. Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664264 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 Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664422 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 Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664582 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 Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664590 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> Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664615 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. Link to comment https://forums.phpfreaks.com/topic/128221-3-column-layout/#findComment-664673 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.