Float issues when using clear:both;

If you go to this page:
http://www.iqnetcom.ca/harvesthouse2006/productpage2.asp

It looks fine in IE but in Firefox the left hand stretched image seems to run out of the bordered box.  I know it has a left float and that is taking it out of the flow, but when you view my next example of the same page..... http://www.iqnetcom.ca/harvesthouse2006/productpage3.asp..... i have added a clear:both under the floated left image area and it causes the right side to move down....what can i do here to get right side back up and keep the stretched left image area in the bounding bordered box??? Do i need a wrapper div somewhere???

Thanks,

verytoothyAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
GrandSchtroumpfConnect With a Mentor Commented:
remove all your heights from your original page (without the additional clearing div).  that should fix the problem.
heights should generally not be set explicitely.
0
 
BogoJokerCommented:
Hmmm.  I don't know the exact reason that is happenings, but if you add this line to boxcontentwhite it renders nicely in firefox (as far as I know, IE ignores minheight so this should not affect IE nor would it matter if it did!)

#boxContentwhite {
  ...
  min-height: 670px;
}

If you stick around somebody might give you an answer about what is really happening instead of this "work-around".
Joe P
0
 
verytoothyAuthor Commented:
Great!
Removed the heights from the floated divs and worked fine.
0
All Courses

From novice to tech pro — start learning today.