www.deronsizemore.com/test/index.html The navigation menu on the right seems to drop down below the two left columns in Internet Explorer. I assume it's a padding issue, but I can't seem to fix it. I don't actually have padding specified on any <div> where there is also width specified. I've got an extra <div> inside the parent container with the content to specify padding, so to get around the broken box model (or so I thought). I tried to simply remove all padding from the page and still got the same result. Can anyone point me in the right direction here?
You've got everything pretty tightly packed. My usual approach for something like this layout would be to float two columns and leave the other static. In this case, float the outer cols left and right. Put side margins on the middle col equal to or slightly larger than the widths of the side cols. Do not specify a width on the center col. The IE problem stems largely from its buggy behavior of enlarging a container to enclose overflow, rather than letting it go. In this case, even a pixel or two expansion will break the layout. I don't know that this is the case here, but I offer the technique above as a safe practice. cheers, gary
Try this... Demo: http://home.earthlink.net/~duhomax/deronsizemore/right_menu.html CSS: http://home.earthlink.net/~duhomax/deronsizemore/styles.css styles.css html, body, ul, li, div { margin: 0px; padding: 0px; } body { background: #fff url(images/bluebgtop.gif) repeat-x; font-family: verdana, arial, sans-serif; text-align: center; } a:link, a:visited { color: #3080cb; } a:hover, a:active { color: #57ad40; } div.text_content { padding-top: 15px; } #wrap { width: 760px; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 40px; text-align: center; position: relative; } #header { /* background: #fff url(images/logo.gif) no-repeat left center; */ width: 379px; height: 91px; display: block; } #main-body { width: 600px; position: relative; } #left-content { width: 420px; font-size: medium; text-align: left; } #middle-content { position: absolute; right: 0px; top: 0px; width: 170px; text-align: left; font-size: small; color: #999; } #navmenu { position: absolute; top: 106px; right: 0px; width: 150px; text-align: left; } #navmenu ul { list-style: none; } #navmenu ul li a { font-weight: bold; font-size: small; display: block; border-bottom: 1px dotted #ccc; padding: 2px 0px 2px 2px; text-decoration: none; width: 150px; } #secondary { width: 100%; background: #fff url(images/secondarybg.gif) repeat-x; height: 200px; } #footer { width: 760px; height: 50px; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 25px; margin-top: -100px; } Code (markup): index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>New Document</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="robots" content="all" /> <meta http-equiv="imagetoolbar" content="false" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="author" content="Deron Sizemore" /> <meta name="copyright" content="" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="wrap"> <!-- #header --> <div id="header"></div> <!-- end #header --> <!-- #main-body --> <div id="main-body"> <!-- #content --> <div id="left-content" class="text_content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lorem diam, ullamcorper at, ullamcorper eu, adipiscing nec, odio. Aliquam laoreet fringilla libero. Fusce ut eros. Cras nulla. Nullam hendrerit dictum leo. Sed sodales velit non urna. Morbi at odio. Aliquam erat volutpat. Donec laoreet est at justo. Phasellus vel sem. Mauris mi. Morbi scelerisque scelerisque sem. Aliquam augue neque, consectetuer eu, elementum at, suscipit a, lacus. Donec ut nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum tortor non ante. Cras imperdiet. Vivamus non orci sed elit porta fringilla. Praesent at enim a est dapibus dictum. Phasellus eget libero. Vestibulum euismod ornare quam. Pellentesque augue. Quisque vel metus. Aliquam adipiscing lacinia risus. Vestibulum non purus. Fusce in diam nec mi aliquet vulputate. Aliquam erat volutpat. Nulla eu diam eget justo porta tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec id arcu. Morbi placerat. Duis dapibus, libero ac consequat placerat, nisi nulla sollicitudin est, ac consequat justo urna sit amet sapien. Vivamus ac magna. Integer lectus dolor, aliquam non, aliquam volutpat, ultrices ut, velit. Sed nec pede id nisl tincidunt mollis. Sed ullamcorper ultricies libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sed est. Mauris dictum ultrices ante. Nulla semper dapibus sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi scelerisque justo non odio. Quisque luctus, felis eu venenatis fermentum, quam risus malesuada nisl, auctor ultrices massa felis id sem. Aliquam non sapien quis arcu posuere rutrum. Suspendisse potenti. Nunc justo tortor, tincidunt in, aliquam nec, imperdiet quis, elit. Morbi aliquet sapien non ante. Nunc adipiscing ullamcorper erat. </div> <!-- end #content --> <!-- #middle-content --> <div id="middle-content" class="text_content"> Quisque sit amet lacus eu arcu consequat ultricies. Praesent suscipit risus id elit. Morbi egestas, erat eget luctus accumsan, diam neque consequat nisi, in sodales nibh enim sed sapien. Nam ornare quam eget urna. Vestibulum nibh quam, hendrerit sed, iaculis et, fermentum vel, augue. Nullam ac nulla. Aliquam erat volutpat. Nullam adipiscing cursus odio. Sed ullamcorper bibendum neque. Etiam pellentesque porta eros. Sed elementum, neque sit amet commodo eleifend, neque enim bibendum neque, et placerat turpis justo nec nibh. Fusce at odio id lacus condimentum blandit. </div> <!-- end #middle-content --> </div> <!-- end #main-body --> <!-- #navigation --> <div id="navmenu"> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> <!-- end #navigation --> </div> <!-- end #wrap --> <!-- #secondary --> <div id="secondary"></div> <!-- end #secondary --> <!-- #footer --> <div id="footer">...footer goes here...</div> <!-- end #footer --> </body> </html> Code (markup):
Brian: Thanks for the code, but when I check it in IE, it looks pretty bad. Are you getting this same thing? All of the sections are overlapping each other. Firefox is great, but IE is bad
I changed a few things around in the stylesheet and the layout seems to work now. All I did different was float all three content areas left instead of having a two left and the naviagtion right. I fixed the menu simply by removing the 2px padding that was added to the left side. So now it seems to work in IE 6 and FF. Can you check it out and see what you think? Would there be any issues with floating all three left opposed to what i had before? Also now that I've done this, there seems to be two other small problems. 1. In IE in the nav menu, if you look under "links" there is the three letters "nks". I guess this is some bug, because I have no idea where that "nks" is coming from. 2. The #wrap div has 50px margin on top and bottom. The bottom is there to separate the top section of the page, from the #secondary section of the page. In FF, there is no separation on the bottom, dispite the 50px margin. IE displays this correctly. Thanks
Hi deron, sorry about that. I only quickly tested it using Opera and Firefox. I see what you mean in IE. To fix it you only have to change one line... Change this... #wrap { width: 760px; margin-left: auto; margin-right: auto; [B]text-align: center;[/B] margin-top: 50px; margin-bottom: 40px; position: relative; } Code (markup): to this... #wrap { width: 760px; margin-left: auto; margin-right: auto; [B]text-align: left;[/B] margin-top: 50px; margin-bottom: 40px; position: relative; } Code (markup): And it should work in all browsers. Also, I see what you mean about the "nks". It could have something to do with the fact that you don't have a DOCTYPE declared. When IE doesn't see a DOCTYPE it gets thrown into quirks mode which can sometimes cause unwated effects.
I was just going by this... http://validator.w3.org/check?uri=http://www.deronsizemore.com/test/index.html I think the word DOCTYPE has to be in uppercase like so...