Solved

Float issues when using clear:both;

Posted on 2006-06-15
3
286 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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).
Suggested Courses

636 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