Can anyone please help me with this stranger issue In IE6 and FF this layout works a treat, but i have been told the new IE and in opera there is a huge amount of white space towards the bottom of the page, any ideas how /where to start, i assume its the css but im not sure, thats why i posted it here. I have checked with my host as i am awarte of a coldfusion white space issue but he assures me that that is dealt with server side. thanks for any suggestions the site is www.organiclinker.com Mike
Not tested. Were I to guess, I'd say the large padding/-margin hack is not appreciated by Opera and apparently not by IE7 either. Try removing the hack and check the results in Opera. Also double check that you're using it correctly. There may be a little thing that the two browsers are sensitive to. You could fall back to simply using overlapping borders as demonstrated in this two column - apparent equal height demo. Just leave out the faux column background. cheers, gary
thanks for the reply kk5st i had a look at what you said and i beleive the problem exists with this bit of code, #container .column { padding-bottom: 1001em; /* X + padding-bottom */ margin-bottom: -1000em; /* X */ } Code (markup): but if i delete it the page screws up. I took the basics of the layout from ALA's Holy grail. any ideas how to deal with this?
Sorry, I haven't studied that article yet. Maybe I'll get a chance if no one else jumps in first. As I said, though, the layout is simple enough just to overlap the margins to simulate equal height columns. Never make it any more complex or unintuitive than you absolutely must. I tend to break things if I try to get too fancy. cheers, gary
If all else fails, you can always set the min-height of both columns to be the same... #container .column { //padding-bottom: 1001em; /* X + padding-bottom */ //margin-bottom: -1000em; /* X */ min-height: 570px; } Code (markup):
OK, here's the source from the demo with all but the border stuff removed. <!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> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <title>2 Column - Apparent Equal Height</title> <style type="text/css"> /*<![CDATA[*/ html, body { padding: 0; margin: 0; } html {height: 100%; padding-bottom: 1px;} body { font: 100% Tahoma, sans-serif; color: black; background-color: white; text-align: center; /*IE5.x centering hack*/ } em { font-style: italic; } p { font-size: 1em; } h1, h2 { font-family: Tahoma, Helvitica, sans-serif; text-align: center; margin: 0; } ul { margin: 0; padding: 0; list-style: none; } li a { display: block; text-align: center; text-decoration: none; } li a:hover { background-color: silver; text-decoration: underline; } blockquote { margin: 0 3em; text-align: justify; font: .9em serif; line-height: 1.1em; } blockquote p { margin-bottom: 0; } blockquote p:before { content: "\201c"; font-size: 3em; color: #ccc; vertical-align: text-bottom; } blockquote p.last:after { content: "\201d"; font-size: 3em; color: #ccc; vertical-align: -.75em; } #wrapper { display: table; /*causes the container to enclose its float children*/ position: relative; width: 750px; margin: 0 auto; /*proper centering*/ text-align: left; /*return to normalcy*/ border: 1px solid #333; } #banner { background-color: white; height: 4em; border-bottom: 1px solid #555; position: relative; padding: 1em; } #sidebar { float: left; width: 160px; padding: 1em 5px 0; border-right: 1px solid #555; /*this lies on the 171st px*/ } /* this is a hack to give IE hasLayout, otherwise it screws things up \* * html li a { height: 1px; } /* */ #main { margin-left: 170px; /*adjust for overlap with sidebar border--notice the border will lie on the 171st px from the left*/ border-left: 1px solid #555; padding: 1em; line-height: 1.3em; } #footer { font-size: 0.8em; text-align: center; margin-top: 0; } .def { border-bottom: 1px dotted #666; cursor: help; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="banner"> <h1>2 Column—Apparent Equal Height</h1> </div><!-- end banner --> <div id="sidebar"> <h2>Menu</h2> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </div><!-- end sidebar --> <div id="main"> <h2>Main Content</h2> <p>The borders are set to <span class="def" title="one lies over the other">overlap</span>. If you know which column will always be the longer, you may use only that column's border.</p> <!-- remove the next section to see the other column as the longer. --> <blockquote> <p class="last">Aliquam odio wisi, molestie quis, hendrerit non, tempus ut, felis. Sed a augue. Fusce metus justo, faucibus in, sagittis dignissim, porttitor id, risus. Praesent sit amet velit. Aliquam erat volutpat. Pellentesque ut diam. Nam venenatis, metus sed scelerisque semper, tellus libero placerat tellus, vel aliquam risus lorem sed dui. Cras lacus. Nullam venenatis adipiscing neque. Maecenas et metus nec libero vehicula congue. Vestibulum vestibulum odio ullamcorper lacus. Etiam odio eros, aliquet et, volutpat eu, porta laoreet, orci. Donec sodales massa tincidunt est.</p> </blockquote> </div><!-- end main --> </div><!-- end wrapper --> <p id="footer">Footer Stuff ©2005</p> </body> </html> Code (markup): cheers, gary