Solved

Float issues when using clear:both;

Posted on 2006-06-15
3
279 Views
Last Modified: 2008-03-17
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,

0
Comment
Question by:verytoothy
3 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16914123
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
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 500 total points
ID: 16916032
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
 

Author Comment

by:verytoothy
ID: 16923417
Great!
Removed the heights from the floated divs and worked fine.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now