CSS height problem in Mozilla Firefox

HTML & CSS
1

Hi,

Any idea why this page

http://hipice.com/retailstores.shtml

won’t stretch vertically to hold contents?

Layout is pretty basic. The style sheet can be found at

http://hipice.com/hipice_style.css

I suggest using Mozilla Firefox developer tools to outline the elements and see what’s weird.

Thanks!

-Ben

2

Because you’re floating both the #product and #right_side_text divs left, they fall out of the normal flow, which means that their containing parent div will not extend down to enclose them.

You will need to add an element below both of the floated items, yet still inside the parent container that will ‘clear’ both floats and give the parent container a reason to extend down and enclose the two floats.


.clearer{

   /* it can be more complicated than this... */
   clear: both;

   }
3

A way to fix the problem for both, IE and Mozilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>

<body>
<div style="border: 1px solid #000; margin: 0 0 20px 0; padding: 5px; white-space:nowrap; width:640px; ">
  <div style="float: left; width: 200px; background-color: #0C3; white-space: normal; padding: 5px; margin: 0 5px 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna.</div>
  <div style="float: left; width: 200px; background-color: #CC3; white-space: normal; padding: 5px; margin: 0 5px 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna.</div>
  <div style="float: left; width: 200px; background-color: #9C3; white-space: normal; padding: 5px; margin: 0 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna.</div>
  <div style="clear: both; height: 0px; font-size: 0px; line-height: 0px;"></div>
</div>
<div style="background-color: #CCC; padding: 5px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna. Ut consequat rutrum augue. Suspendisse egestas quam non felis.</div>
</body>
</html>
4

While that works fine for the example you have shown :slight_smile: Mozilla will not usually clear an element unless the clearing element has some height.

If you just remove the parent wrapper then the clear element doesn’t clear the floats.

e.g.


<div>
<div style="float: left; width: 200px; background-color: #0C3; white-space: normal; padding: 5px; margin: 0 5px 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna.</div>
<div style="float: left; width: 200px; background-color: #CC3; white-space: normal; padding: 5px; margin: 0 5px 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna.</div>
<div style="float: left; width: 200px; background-color: #9C3; white-space: normal; padding: 5px; margin: 0 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna.</div>
<div style="clear: both; height: 0px; font-size: 0px; line-height: 0px;"></div>
</div>
<div style="background-color: #CCC; padding: 5px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pellentesque tortor eu magna. Ut consequat rutrum augue. Suspendisse egestas quam non felis.</div>

However with a slight tweak you can get tyhis to work by adding a height of 1px and then taking it away again with a negative margin.


.clearer {
height:1px;/* for moz*/
overflow:hidden;/* makes ie display only 1px height*/
clear:both;/*clear floats*/
margin-top:-1px;/*close the gap that the 1px height made*/
}

The above code will work in nearly all scenarios for the major browsers, however there are times (ver few times) when a break <br class=“clearer” /> has to be used instead of a div but its hard to nail down the exact circumstances of when and where.

Have a look at the FAQ on floats for a longer explanation :slight_smile:

Of course there is also the method of adding the :after pseudo class to produce a clear.

http://www.positioniseverything.net/easyclearing.html

Paul

5