浮动/背景色/填充ie6错误

Question

I'm having a problem with my website. The following code isn't displayed correctly in ie6. The left padding is missing.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
  <div style="margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;">
   <div style="float: right;">top_right</div>
   <div style="clear: both;"></div>
   <div>test</div>
  </div>
</div>

I changed all the styling to inline for the sake of the example. I do not want to simply set the text-align to right for the "top_right" text, because I have some other strange random errors like this. Also, if I remove the background-color, it works fine (in this case).

What should I do? All help will be appreciated, thanks!

Answer 1

ie6 width value must be a fix.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
   <div style="margin: 0 0 48px; width:566px; padding:16px; border: 1px solid #404050; background-color: #a0a0a0;">
      <div style="float: right;">top_right</div>
      <div style="clear:both">test</div>
   </div>
</div>

Answer 2

The first thing to try when fighting with IE6 is to set hasLayout . Use zoom: 1 for the second <div> .

Answer 3

One solution could be make it absolute positioning, and then set the distance from the right side to be the same as the padding. Only problem with this is the text on the left will be on the same line, so you would have to have some sort of spacer there if you need it to be on its own line.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;">
   <div style="position:relative; margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;">
      <div style="position:absolute; right:16px;">top_right</div>
      <div style="clear: both;"></div>
      <div>test</div>
   </div>
</div>