Container background not showing and/or divs out of position

[Wickham]

Here is a FAQ I often get asked by beginners. Please comment so that

we can arrive at an improved answer.

 

Question:- My containing div doesn't have a background-color or

background-image and/or the lower divs have moved up out of position.

 

Answer:- This happens when you have floated divs. You need to insert a

clearer div with clear: both and no height below them so that it forms a

full-width invisible barrier to stop lower divs moving up into any space

above. If placed last inside a containing div it drags down the container

background-color or background-image to the bottom of the lowest

floated div.

 

There are two main reasons for using a clearer div:-

 

1. to follow rows of floated elements to prevent an element which should

be on a lower row jumping up into a space in a higher row.

 

2. to drag down the background color or image in a containing div where

elements inside have a float.

 

Item 1

 

If you have several rows with floated elements like divs or images which

are side by side but of unequal heights, one or more following elements

may jump up into a space under an element with less height than the

others (especially in IE but not always in Firefox, Opera or Safari). It can

also occur where divs are floated left and right leaving a space in the

middle and a following div without a float moves up into the space but

you don't want it to do that.

 

Items 19 and 21 on http://www.wickham43.net/threecolumns.php show

the typical problem and its solution which is to put a clearer div with

clear: both; width: 100%; between the rows so that it clears the floats for

the full width, not just for the first element on a lower row. It forms an

invisible full-width nil-height barrier to stop lower elements moving up.

 

You can put the clear: both style in the first following div which will stop it

from moving up, but if it doesn't have much width a following div can jump

up instead, so it's often safer to use a full-width clearer div.

 

Item 2

 

Where you have a containing div with floated elements like divs or

images inside near the bottom of it, the browser assumes that the

floated elements have no height, so the containing div will either have no background image or color or only for part of the height like its padding.

 

The floated elements will appear to "hang down" below the containing div

even though they are inside for all other purposes.

 

If the containing div has a mixture of text and divs and floated elements,

the containing div will provide a background for as much height as is

required by the non-floated elements and the floated elements will appear

to hang down below the level of the non-floated elements if their height

exceeds the non-floated elements.

 

The solution is to put a non-floated element (a clearer div or another

non-floated div with content) below all the floated elements, just before

the closing tag of the containing div. The containing div then drags

down its background image or color to cover the non-floated element and

in so doing covers the floated elements above.

 

See item 2b on http://www.wickham43.net/firefoxbackground.php'>http://www.wickham43.net/firefoxbackground.php

 

Clearer div code

 

The clearer div needs to be full-width and with no height, margins,

padding or borders so that it is invisible. The div code is either:-

 

 

 

or it can be coded in a stylesheet like this:-

 

.clearer { clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;

margin: 0; padding: 0; border: 0; }

 

or inside style tags in the head section:-

 

.clearer { clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;

margin: 0; padding: 0; border: 0; }

 

with html markup as:

 

 

 

Some of the attributes like margin: 0; padding: 0; border: 0; can be

omitted if your general div style has already made them 0 but it may be

safer to leave them in the clearer div style.

 

If you don't put   inside the div you won't need to state line-height:

0; font-size: 0; in the style, but divs should not be empty so I include

  however,   is a character and creates its own line-height

and font-size so these need to be 0 if you include   in the div.

 

Some people use visibility: hidden; in the style:-

 

.clearer { clear: both; width: 100%; height: 0; visibility: hidden; } which

does save a little code.

 

There is also a clearfix:after method which works by putting the clear in

the containing div so that the divs "after" are affected and is shown in

item 2c on http://www.wickham43.net/firefoxbackground.php but I think it

is unnecessarily complicated and a simple clearer div seems to work

well.

[shelfimage]

Another solution that works well for me is using overflow:hidden or overflow:visible on the container holding the floated elements. I also use clears but do so with br, e.eg.,
or I just clear the next element below the floated elements or beneath the container holding the floats. For example,

 

content here

more content here

Content beneath the floats here

 

 

#something {clear:both}