IE 8 Incorrectly Positioning 960 Grid_问答_开发者

开发者 https://www.devze.com 2023-02-19 08:49 出处：网络

I have the below html & class structure. It displays as expected in Firefox, but in IE 8 the rt-col is pushed to the following row. Any ideas on what could be wrong?

I have the below html & class structure. It displays as expected in Firefox, but in IE 8 the rt-col is pushed to the following row. Any ideas on what could be wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR开发者_Python百科/html4/strict.dtd">
...
...
<div id="main" class="container_12">
  <div id="lt-col" class="grid_8">
  ...
  </div>
  <div id="rt-col" class="grid_4">
  ...
  </div>
</div>

The CSS pertaining to the containers & grids are below:

#main:after, #lt-col:after, #rt-col:after { 
   content: "."; 
   height: 0; 
   visibility: hidden; 
   display: block; 
   clear: both; 
} 

#main { 
   width: 960px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-top: 10px;
}

Assuming you are trying to build a left and right column grid:

You need to define an explicit width for each column. Currently, you have none. And since you're using the "clear: both;" attribute and value on both columns, they'll simply display as rows.

Add this to your CSS (or some variation of widths) and your rows will turn to columns:

    #lt-col {
            float: left;
            width: 50%;
    }
    #rt-col {
            float: right;
            width: 50%;
    }

@clairesuzy I think the issue lies on the styling that is applied. There is some style that is adding a padding to either the main div or the rt-col and lt-col div

this can easily be sorted by using the below code to start with

<div class="container_12">
  <div class="grid_8">
  ...
  </div>
  <div class="grid_4">
  ...
  </div>

  <div class="clear"></div>
</div>

this above will work out of the box irrespective of any styling...

then do this and ensure there is no padding

<div id="main">

    <div class="container_12">

        <div class="grid_8">
            <div id="lt-col">...</div>
        </div>
        <div class="grid_4">
            <div id="rt-col">...</div>
        </div>

    <div class="clear"></div>   
    </div>
</div>

simplified version of what you wish to do