Hi I can't think of what i'm doing wrong as it's getting late.. Fixed left column say 500px Right column set at 100% Right column opened first in Source. I thougth float the right column left, and set a margin of 500px, but it still keeps it's 100% width and stretches across the page i.e 500px + 100%. I know this can be done but can't think of what i'm doing wrong!
This is a case where absolute positioning is the way to go. Note the zoom property. IE6 needs it due to its poor positioning model; it sets hasLayout. IE7 seems ok without it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ #main {zoom: 1; background-color: silver; margin-left: 500px; padding: 5px; position: relative; border-left: 1px solid black; } #sidebar { background-color: #fdd; padding: 5px; position: absolute; left: -501px; top: 0; width: 490px; } /*]]>*/ </style> </head> <body> <div id="main"> <h1>main column</h1> <p>blah, blah blah</p> <div id="sidebar"> <h2>sidebar</h2> <p>blah, blah blah</p> </div> </div> </body> </html> Code (markup): cheers, gary
Uhm... No. Oh hell no even. The moment you absolute position a sidebar, if it's taller than the content and shorter than the window, it WILL get cut off with no scrollbars, making absolute positioning of that sort of element a total miserable /FAIL/. In general unless you are declaring positioning inside an in-flow element where height can be guaranteed, absolute positioning is a steaming pile that should be avoided in the same manner one avoids putting the horses at the front of a parade. On top of which, there is no reason to be using the non-validating zoom:1 to trip haslayout since overflow is not set, therin a percentage height would validate AND trip haslayout. There is also no reason to bother slapping CDATA around the inlined style, since CSS doesn't use any of the restricted characters you need CDATA to hide from a XML parser. The best solution here is, as always for div based columns where source order is concerned, is the use of a negative margin on the sidebar with a double-wrap on the content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> column demo </title> <style type="text/css"> * { margin:0; padding:0; } h1, #footer { padding:8px; text-align:center; background:#FFE; clear:both; } #contentWrapper { float:right; width:100%; } #content { margin-left:500px; background:#DEF; } #sideBar { float:right; width:500px; margin-right:-500px; background:#DFE; } p { padding:0 8px 1em; } h2 { padding:0.5em 8px 0.25em; } </style> </head><body> <h1>Site Title</h1> <div id="contentWrapper"><div id="content"> <h2>Main column</h2> <p>blah, blah blah</p> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <h2>Sidebar</h2> <p>blah, blah blah</p> <!-- #sideBar --></div> <div id="footer"> Test Footer <!-- #footer --></div> </body></html> Code (markup): No hacks, works all the way back to IE 5.5. Valid Markup, Valid CSS, no need for haslayout. You may want to wrap the double-div and sidebar in another DIV to add faux columns though, since DIV columns can't auto-stretch to the same height.
Not true. Add content to the sidebar and try it. It is true that positioning, fixed, relative or absolute, has gotchas, but it is also true that it is powerful and is very usable with discretion. Granted, there are valid properties that would trigger hasLayout, but zoom has no side effects, and was simply used to point out that IE6 does require hasLayout to work properly in setting the positional reference container. Using any declared height in this case would be potentially fatal if hacks are not used to restrict it to IE6. Since much of my work is served as xml, my starting templates include the xml required declaration. It is redundant in text/html, but does no harm. By the way, that's embedded, not inlined styles. Not necessarily the best, just another option. I chose the one I offered for its simplicity and intuitive methodology. Were a footer part of the OP, I would have suggested the sidebar be limited to less than the height of the main column. It wasn't, so I didn't. Have a care where negative margins and IE are concerned. There are conditions (the floats work for this, here) where one or the other or both of the margined element and its parent need to be explicitly positioned. It seems you are again overly positive in your opinions, without supporting fact. gary
Thank you both for your quick, fully working solutions and exstensive descriptions on how the layouts actually work, which goes a long way since I can understand how the layouts actually work. Again many thanks, it's appreciated!!
Add a footer and try it... and I'm NOT getting scrollbars in Opera 9.27 or IE7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ #main {zoom: 1; background-color: silver; margin-left: 500px; padding: 5px; position: relative; border-left: 1px solid black; } #sidebar { background-color: #fdd; padding: 5px; position: absolute; left: -501px; top: 0; width: 490px; } #footer { clear:both; background:#FF0; } /*]]>*/ </style> </head> <body> <div id="main"> <h1>main column</h1> <p>blah, blah blah</p> <div id="sidebar"> <h2>sidebar</h2> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> <p>blah, blah blah</p> </div> </div> <div id="footer"> Test footer </div> </body> </html> Code (markup): Said discretion being never to use it to build a major layout element that should be in flow. Wrong, height:1% is completely safe if you don't use position:absolute - which again is a horrible idea for a major layout element like an entire column. It's redundant even served as XML because CSS has NO CHARACTERS THAT NEED TO BE CLASSIFIED LIKE THAT. That's just wasted characters. Same difference - either way it's not where it should go in a production page - EVER. Cute for posting simple examples to people, only real reason to do it that way. Sorry, but to me that's like the dillwads over at Bugzilla nitpicking over the difference between a crash and a hang. SIMPLICITY? You've got sections that should be kin set up as nesting, absolute positioning screwing up document flow, and a layout that forces you to trip haslayout. Methinks you and I have a different definition of 'simple'. Simply because he mentions not a footer is no reason to assume there isn't one. A header and a footer are fairly standard for 99% of webpages out there - posting a technique that doesn't work with the latter isn't all that useful. Since when? Could you post an example of that because I've never encountered a problem. (and I use negative margins a lot - a good deal of the time I use them with text-align instead of floats!) Sorry, but to me you've got some major misunderstandings on how to build a layout.
:shrug: Open in IE6, with and without the position property on#test. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ #wrapper { width: 500px; border: 1px solid black; } #test { /*position: relative;*/ background-color: white; border: 1px solid black; width: 300px; margin-right: -150px; float: right; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <p id="test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non mi vel magna commodo pretium. Nam convallis nisl at mauris. Duis vel odio eget erat porta convallis. Nulla viverra. Integer scelerisque. Cras aliquam. Etiam odio.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam non mi vel magna commodo pretium. Nam convallis nisl at mauris. Duis vel odio eget erat porta convallis. Nulla viverra. Integer scelerisque. Cras aliquam. Etiam odio. Donec ac neque. Etiam quis metus in nisl luctus congue. Suspendisse convallis luctus urna. Vivamus ut sem id leo scelerisque varius. Donec in augue non ligula posuere imperdiet. Nulla iaculis commodo odio.</p> </div> </body> </html> Code (markup): You are again overly positive on an issue of which you are in total ignorance. gary
Thing is, you aren't POSITIONING it, you are just using position:relative to correct IE's box model. When you said "explicitly positioned" I figured you were talking about ACTUALLY POSITIONING it using left, top, right or bottom. What you have here is a box model hack. Using a negative margin to move it outside it's parent container hits up against the oddball IE behavior of automagically applying it's own wierd version of 'overflow:hidden' (that is not actually overflow:hidden) to block level elements (this is actually kin to haslayout, it was a shortcut evaluation in the renderer to avoid wasting CPU on moving a larger render box). This is much like using position:relative to guarantee that 100% inside an element is the the width of the element and not it's parent. Though when using negative margins one should usually put position:relative on there anyways just to make sure depth-sorting is the way you want it - since position:relative automatically depth-sorts over position:static Hmm, that and in my designs I would rarely ever nest a standout like that. You seem to be nesting things that are not childer.
That's exactly what making {position: relative || absolute || fixed;} is about, giving position. It has nothing to do with the box model, but with the positioning model. IE's positioning model is so buggy that adding position willy-nilly causes as many problems as it fixes. And, no, I will not hunt up another example. The paragraphs are siblings. gary