CSS Layout Issue in IE6 - Example in Book Fails

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm learning CSS (and loving it), but an example in "Designing Without
Tables Using CSS" fails in IE6.  It works as I expect and understand in
IE7 and Firefox 2. I have whittled down the example to just the basics.


In IE7 the yellow sidebar appears to the left of the green content
section. This is what I expect.

In IE6 it picks up the 200px left margin and therefore aligns with the
content section. This appears to me to be a bug. Perhaps someone can
explain to me what I'm missing or a workaround to the bug.


body {
   margin: 0;
   padding: 0;
   min-width: 740px;
   background-color: black;

#wrapper {
   text-align: left;
   width: 740px;
   margin-left: auto;
   margin-right: auto;
   background-color: blue;
   padding: 10px;

#content {
   background-color: green;
   border: 1px solid #f0f0f0;
   padding: 0;
#content .inner {
   margin: 30px;

#content-wrapper {
   margin: 0 0 0 200px;
#main {
   position: relative;
   top: 0;
   left: 0;
   width: 180px;
   border: 1px solid #f0f0f0;


"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml ">
     <title>Footbag Freaks</title>
     <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
     <link rel="stylesheet" type="text/css" href="fixedwidth.css" />
     <div id="wrapper">
       <div id="header">
         <p id="tagline">The Home of the Hack</p>
       </div> <!-- header -->
       <div id="main">
         <div id="content-wrapper">
           <div id="content">
             <div class="inner">

           </div> <!-- content -->
         </div> <!-- content-wrapper -->
         <div id="extras" >
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
         </div> <!-- extras -->
       </div> <!-- main -->
     </div> <!-- wrapper -->

Re: CSS Layout Issue in IE6 - Example in Book Fails

Jim Carr wrote:
Quoted text here. Click to load it

Fixed this by using the HasLayout workaround within some of the parent

Site Timeline