Solved

Float issues when using clear:both;

Posted on 2006-06-15
3
282 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 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