Solved

Float issues when using clear:both;

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Css regex 6 53
Effective CSS style applied to an element 5 46
CSS Flex space-between 2 31
Change how page is organized 3 51
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... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

751 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