Im having a problem, IE6 (and 7 I think) are pushing my float: right elements down a line.

Html:

<div class="PP_RedLine">
   <div class="PP_Title">
       Instant Savings 
       <span class="PP_Info">(Ends: 5/6/2010 9:00PM)</span>
    </div>
    <div class="PP_Price">($100.01)</div>
</div>

CSS:

.ProductPrice .PP_RedLine { overflow: hidden; height: 14px; }
.ProductPrice .PP_Title,
.ProductPrice .PP_Price { background-color: white; }

.ProductPrice .PP_Title,
.ProductPrice .PP_Price { display: inline; }
.ProductPrice .PP_Price { float: right; }

Display:

Instant Savings (Ends: 5/6/2010 9:00PM)

Upon further inspection, the ($100.01) is on the next line, "hidden" because of the overflow, right floated. The PP_Title div is not full width, so nothing should be pushing the floated element down.

Works fine on IE8/FF/Chrome/Safari/etc...

I'd show pictures but I'm too new to post links.

4 answers

KC Rajput 178
0
points
This was chosen as the best answer

hi if float right is not working.

 .right{
        float:right;
    }

if your html code is like this

<div class="left"></div>
<div class="right"></div>

than write this as

<div class="right"></div>
<div class="left"></div>

and you should also set width of right div.

Answered over 6 years ago by KC Rajput
  • Thanks, it worked! Aren B over 6 years ago
snott 5
1
point

Setting height on an element that you are floating doesn't really work all the time. See the great floatutorial: http://css.maxdesign.com.au/floatutorial/introduction.htm

I'd set a width and that will probably fix your problem.

Answered over 6 years ago by snott
  • Sorry, typed too fast. I mean setting a height on the parent element (not the floated element). You should set a width. In your case 'PP_RedLine' width:x should solve it OR you can float the parent as well. For a float everything method of float clearance. Whichever floats your boat. snott over 6 years ago
Kau-Boy 110
0
points

I would suggest to use display: inline-block as otherwise the browser might ignore any width or height set in the CSS! So if you want to float a block or an inline element, always use a block or inline-block value for display.

Answered over 6 years ago by Kau-Boy
  • I tired that, IE6 doesn't respond well to it. Aren B over 6 years ago
0
points

I would suggest to make div.PP_Title an inline element (e.g. a span as well), solves your problem instantly.

Answered over 6 years ago by Roland Franssen