Wickham's HTML & CSS tutorial

Sitemap | Home | Search

Browser background display differences

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE

 

Background-colors full height for a containing (parent) div

The examples below show a containing (parent) div with no defined height. The background-color of the parent containing div will always show for the full height of the inner divs if it is given a height itself. It is normally best to give divs a height but sometimes this is not desirable if you want all divs to have flexible height to allow for the viewer using larger text size. If you want a flexible height to cater for larger text used by partially sighted people then beware of problems where Firefox and IE only create a div height as much as is necessary so a background may not extend as far as you would like.

 
The following examples are in a centered page containing div width: 730px; except those outside the page container.

The general CSS codes in the main stylesheet are:-

1 red icon The azure child div below has no float attribute. IE and Firefox show this differently and badly.
Keeping one or more child divs without a float forces IE6-IE7 to extend the parent div's color down to bottom of the longest div which has no float but not down to the bottom of divs with a float if they have greater height as in this case. If all child divs are floated, the parent div will have no height and therefore no background color at all as in item 2a.
However, in IE8 or above and Firefox a child div without a float will flip down below the float: left div and take the background-color down with it athough IE6-IE7 will show the div with no float between the left and right floated divs.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
width: 240px; background-color: azure; (no float: left;) overall width 248px including 2*3px padding and 2*1px border
 

2a red icon All child divs below have float attribute but parent div background does not show in Firefox or IE (IE6 shows it in certain circumstances but not this time).

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 

2b green icon The example below is the same but a nil-height full-width clearer div
<div style="clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px; padding: 0; margin: 0; border: none;">&nbsp;</div>
has been added after all the content and enclosed floated divs and just before the closing tag of the parent div. This has the effect of dragging the parent background down in Firefox and IE. You can omit any of the padding: 0; margin: 0; or border: none; if these are already covered by your general div styles. I have shown the code as an inline style above (ie within the html markup for the div tag) for clarity and convenience but it would be more appropriate to create a class and place the styles in a stylesheet or between head section style tags and a class in the html markup.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 

The code is:-

<div class="background">
...(floated divs here)...
<div style="clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px; padding: 0; margin: 0; border: none;">&nbsp;</div>
</div> <!--end of parent containing div-->

The above method seems to work in every case where floated divs would otherwise "hang down" below the background-color or background-image of a containing div and is my favorite method as I can't see what can go wrong. It has the effect of increasing the amount of markup code but if used sparingly it will have an insignificant effect on download time, especially now that most people have a broadband connection and if you replace the inline styles with a class and put the class style in a stylesheet.

An alternative clearer div that performs the same function is:-
<div style="clear: both; width: 100%; height: 0px; visibility: hidden; padding: 0; margin: 0; border: none;">&nbsp;</div>
However, since &nbsp; is a character with a default character height the div will probably expand to create a line space unless line-height: 0px; font-size: 0px; are added.

 

2c gold icon The example below uses another technique to drag the background-color down in Firefox. It uses the "clearfix" solution in the containing div which encloses floated divs that would otherwise "hang down" below the bottom of the background-color.
This solution is definitely a "hack" and I'm not sure whether it works with all browsers. It works in IE and Firefox. The extra nil-height div in item 2b appears to work in all situations and seems likely to be more reliable.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 

The code for the style in the stylesheet or inside style tags in the head section is:-

.clearfix:after {content: "."; height: 0px; visibility: hidden; display: block; clear: both; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%; display: block; }
/* End hide from IE-mac */

See positioning is everything for more details.

The code for the body HTML is:-

<div class="clearfix" style="background-color: #c0c0c0; padding: 0;">
<div style="float: left; width: 240px; background-color: pink;">

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text<br>
more text<br>
more text
</div>
<div style="float: right; width: 210px; background-color: yellow;">

float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
</div>
<div style="float: left; width: 240px; background-color: azure;">

float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
</div>
</div>

The containing parent div needs a size to make the class work, either a width or a height. If your div has a set height that is no problem but my example above does not need a width because it is contained in the containing div for the whole page and it does not need a height because I want it to expand with larger font sizes. So it has had a height of 1% included in the style. Both IE and Firefox expand beyond this limit if content requires it, but it has the additional effect of enabling the clearfix class to operate and drag the background-color down for the full extent of the longest floated div.

The addition of the clearfix class in the containing div which encloses the floated divs means that the additional nil-height div added just before the end of the containing div as in item 2b is not required so it satisfies webpage constructors who are trying to reduce markup to a minimum.

 

Overflow: hidden method

2d green icon The example below is the same as item 2a but uses overflow: hidden; width: 100% in the parent containing div. It is essential to state a width (percentage or fixed). This has the effect of dragging the parent background down in Firefox and IE. The code for the containing div in the example is:-

<div class="background" style="overflow: hidden; width: 100%;">
...(floated divs here)...
</div>

This method seems to work in every case that I have come across where floated divs would otherwise "hang down" below the background-color or background-image of a containing div but there might be some browsers or circumstances where it doesn't work.

See Quirksmode

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border

The example below is the same code as above but is outside the page containing div to show that it works with 100% of the viewing window except that at small window resolutions the floated divs will move down as there is no fixed width containing div for the whole example so the parent containing div becomes too narrow. It is essential to state a width for the parent containing div (percentage or fixed). (I actually used 99% because 100% caused a minor horizontal scrollbar at 800*600 screen resolution in IE6 but the effect at smaller window resolutions is the same).

 

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 

3 gold icon Parent containing div below has overflow: auto; and the background-color shows in Firefox and IE7 and above. The parent containing div has no width as it is contained by the page container width and has no height.
IE6 does not show the containing div background-color in this example. IE6 will drag the background-color down if a width is added in the containing div if the height is to be flexible by omitting a height size and the width is still needed in IE6 even if height: auto is added.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 

4 red icon Middle azure child div below has no float attribute but has margin: auto;
Margin:auto centralises IE6-IE7 in space between side divs but IE8 or above and Firefox centralise in the parent so if side divs are unequal, central div is not central between side divs in IE8 or above and Firefox.
Background only shows if the divs with a float have less height than the div with no float.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
width: 240px; background-color: azure; margin: auto; (no float: left); overall width 248px including 2*3px padding and 2*1px border; margin-auto centralises IE in space between side divs but FF centralises in parent so if side divs are unequal, central div is not central between side divs in Firefox.
 

5 gold icon Middle azure child div below has no float attribute but has margin-left: 256px; parent background only for div without a float.
Margin:auto centralises IE6-IE7 in space between side divs but IE8 or above and Firefox centralise in parent so if side divs are unequal, central div is not central between side divs in IE8 or above and Firefox. To centralise middle div between side divs in both Firefox and IE8 or above calculate and use margin-left: 256px in this case instead of margin: auto;
Divs are basic width + padding 2*3 + borders 2*1 = +8px. Overall width 730 - side divs 248+218 = 264 space less middle div 248 = 16 so net space / 2 = 8 each side + left div 248 = 256 margin-left.
This works well with Firefox and IE7 and above but IE6 does not seem to calculate exactly the same way and displays better with option 4.
If widths of side divs are percentages this solution will not work unless middle div has no width and margins are also in percentages.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
more text
width: 240px; background-color: azure; border:1px solid black; margin-left: 256px; (no float: left); overall width 248px including 2*3px padding and 2*1px border
 

6 red icon There is no third div below; left and right divs are floated; parent div background does not show in Firefox and IE7 and above (IE6 shows it in certain circumstances but not this time).

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
 

7 gold icon No middle div below; parent background only covers height of text.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
Text (or image) instead of third div
Text floats up into space between floated divs in IE and Firefox
Silver background only as far as required in IE and Firefox.
Text will wrap under side divs if it extends down below either of them.
 

8 green icon Parent div below has no width ie default 100%; middle azure div has no defined width and is flexible to 100% of remaining width.
Background only shows if the divs with a float have less height than the div with no float.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
background-color: azure; margin-left: 248px; margin-right: 218px; overall width 248px including 2*3px padding and 2*1px border
(no float: left; and no width).
Third div floats up into space between floated divs in IE and Firefox.
Add margin-left: 248px; margin-right: 218px; to enable div to float between side divs and so that if content goes lower than side divs it does not wrap under them.
more text
more text
 

9 green icon Parent div below has no width ie default 100%; right azure div has no defined width and is flexible to 100% of remaining width.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
float: left; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
background-color: azure;
(no float: left; and no width, no margin-left, no margin-right).
Right div floats up into space beside floated divs in IE and FF.
No margin-left, no margin-right so that if content goes lower than side divs it will wrap under them.
(It needs a full line height to start wrapping).
more text; more text
 

10 green icon Parent div below has no width ie default 100%; right azure div has no defined width and is flexible to 100% of remaining width.
Background only shows if the divs with a float have less height than the div with no float.

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
float: left; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
background-color: azure; margin-left: 466px; (no float: left; and no width).
Third div floats up into space beside floated divs in IE and Firefox.
Add margin-left: 466px; (no margin-right) to enable div to float beside side divs and so that if content goes lower than side divs it does not wrap under them.
more text
more text
more text
 

11 red icon Left div float: left; right div float: right; both percentage widths. Percentages may not work at small screen resolutions if set too tight; one div will flip down. It happens with this example below about 650px window resolution.
Parent div background does not show in Firefox and IE (IE6 shows it in certain circumstances but not this time).

float: left; width: 24%; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
float: right; width: 73.5%;
Percentages should not add to 100% (to allow for borders, padding and margins).
more text
more text
more text
 

12 green icon Left div float: left; percentage width; right div no width; margin-left: 25%. Background only shows if the div with the float has less height than the div with no float.

float: left; width: 24%; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
no width; no float; margin-left: 25%;
more text
more text
more text
more text
 

13 green icon Left div float: left; right div float: right; both percentage widths. Middle azure div has no defined width or float and expands to fill space between side divs. It must be coded in the html file after the two side divs in order to float up between them.
Background only shows if the divs with a float have less height than the div with no float.

float: left; width: 24%; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
float: right; width: 21%; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
background-color: azure; margin-left: 25%; margin-right: 22%; (no float and no width). Third div floats up into space between floated divs in IE and Firefox.
Add margin-left: 25%; margin-right: 22%; to enable div to float between side divs and so that if content goes lower than side divs it does not wrap under them. Margins must be larger than percentage of side divs to allow for their borders, padding and margins.
 


14 red icon Another problem is shown below. The containing (parent) div has position: absolute; and is centralised using the left: 50%; margin-left: -365px; principle instead of the margin: auto; method used for the rest of this page (see Centering divs). If the viewing window is reduced to less than the width of the containing div, the left side disappears off the left edge of the screen and no scrolling is possible. The margin: auto method of centralising does not work with position: absolute.

This is the same example as item 2a but the silver background does now show for the full height of the divs in Firefox and IE where item 2a did not because the containing parent div now has position: absolute. This arrangement is best used with a very small div where a very small viewing window would be needed to cause the left edge to disappear off the left of the window.

 

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border

 

 

15 green icon This is a solution to the problem shown in item 14. A position: relative div has now been placed outside the silver containing div; it could be exactly the same size as its only purpose is to enable margin: auto; to work so that the div centralises without the left side moving out beyond the left edge of the window at small window resolutions. The silver containing parent div is position: absolute as in item 14 to enable the silver background-color to extend the full height of the div where a height has not been stated for flexibility.

 

float: left; width: 240px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
more text
more text
more text
float: right; width: 210px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border

 

Summary of items 2a, 14 and 15

In item 2a margin: auto; was used in the containing div for the page and the silver parent div background-color did not extend down for the full height of the div in Firefox and IE because no height was stated (to retain flexibility).
In item 14 position: absolute was used to show the silver background-color for the full height of the div but the margin: auto method of centralising the div does not work with position: absolute so the left: 50%; margin-left: -365px; method of centralising was used with undesirable consequences if the window resolution is reduced below the width of the div.
Item 15 adds an outer containing div with position: relative and margin: auto for centralising and the inner silver containing parent div has position: absolute to enable the background-color to extend for the full height in Firefox.

Because of the effect of any position: absolute divs on the flow of following items it is best if position: absolute is used for a whole page. In these examples I have had to leave adequate space below position: absolute in case a viewer enlarges the text. Enlarged text in a position: absolute div is out of the normal flow so following divs or p tags are not pushed down.

 

Equal height background-colors or background-images for several divs

There are various examples in items 16 to 19.

16a green icon This example shows two columns formed with divs of different heights but the background-colors (or background-images) have been dragged down to the height of the div with the most height, in this case #content1 div. You need to be careful to ensure that the div with most height is placed inside the div with less height and also check that this is still the case after making edits.

In a layout with two or three columns where divs are given no height to be flexible if someone increases text size the different heights will be obvious if each has a different background-color or background-image. If all divs have the same fixed height that will ensure that each background is the same height but if someone increases text size, text may overflow the div height. This example shows how divs can have a flexible height (no height stated) and show the same background heights which will be determined by the div with most content.

 

The html markup code is:-

<div class="menu">
<div id="content1">
... </div>
...(there must be menu div text, image or inner div here)...
</div> <!--end of menu div-->

The style code is:-

.menu { width: 725px; background-color: pink; float: left; padding: 0 0 0 3px; border: 1px solid #000; }
#content1 { width: 469px; background-color: azure; float: right; padding: 0 3px; border: none; }

 

A two column layout flexible in width and in height and with a "sticky footer"

16b green icon The example in the following link uses similar code to item 16a but has a flexible width for the right column and has to have an additional #leftinner div of fixed width for the left column. It shows two columns formed with divs of different heights but the background-colors (or background-images) have been dragged down to the height of the div with the most height, in this case the right #content div. The advantage of this method is that the div heights are flexible and backgrounds will expand down provided that the same div always has the most content to drag down the backgrounds of the others.

The example has a maximum width so that the content does not appear too wide in very wide browser windows like 1920px and a minimum width so that the columns do not overlap in small browser windows.

Background full height of divs - 2 columns which uses maximum and minimum width for modern browsers but a fixed width for IE6 because the width:expression code for IE6 was unreliable with a lot of content.
The footer sticks to the window bottom if there is little content above, or stays below the content if there is enough to cause vertical scrolling.

The example is ready to use; just change the content and background colors! There is no stylesheet, all styles are in the head section for convenience but I have shown the link code if you want to use a separate style sheet called style.css and add styles for links, etc. You can use a plain color or a normal image in the divs, although they will have to repeat vertically to cope with a flexible height.

The example does not use the "faux-columns" method which uses a tiled background image. "Faux Columns" cannot use a color instead of an image and cannot have a flexible width with the fixed width image shown in the link. Item 18 is similar to the "Faux Columns" method.

 

17a green icon This example shows three columns formed with divs of different heights but the background-colors (or background-images) have been dragged down to the height of the div with the most height, in this case the center #content2 div. The advantage of this method is that the div heights are flexible and backgrounds will expand down provided that the same div always has the most content to drag down the backgrounds of the others.

 

The html markup code is:-

<div class="menu">
<div id="rightcontainer">
<div id="content2">
... </div>
<div id="rightinner">
...(this div must be after #content2)... </div>
</div> <!--end of #rightcontainer-->

...(there must be menu div text, image or inner div here)...
</div> <!--end of menu div-->

The style code is:-

.menu { width: 725px; background-color: pink; float: left; padding: 0 0 0 3px; border: 1px solid #000; }
#rightcontainer { width: 475px; float: right; background-color: yellow; padding: 0; border: none; }
#content2 { width: 247px; background-color: azure; float: left; padding: 0 3px; border: none; }
#rightinner { width: 216px; float: right; padding: 0 3px; border: none;

Code adapted from advice from shawnm and Agricola on WebDevForums

 

A three column layout flexible in width and in height and with a "sticky footer"

17b green icon The examples in the following links use similar code to item 17a but have a flexible width for the center column and have to have an additional #leftinner div of fixed width for the left column. They show three columns formed with divs of different heights but the background-colors (or background-images) have been dragged down to the height of the div with the most height, in this case the center #content div. The advantage of this method is that the div heights are flexible and backgrounds will expand down provided that the same div always has the most content to drag down the backgrounds of the others.

The examples have a maximum width so that the content does not appear too wide in very wide browser windows like 1920px and a minimum width so that the columns do not overlap in small browser windows.

Background full height of divs which uses maximum and minimum width for modern browsers but a fixed width for IE6 because the width:expression code for IE6 was unreliable with a lot of content.
Background full height of divs for IE6 which uses maximum and minimum width for modern browsers or a width:expression to provide maximum and minimum width for IE6. This example shows how the footer sticks to the window bottom if there is little content above, or stays below the content if there is enough to cause vertical scrolling.

The examples are ready to use; just change the content and background colors! There is no stylesheet, all styles are in the head section for convenience but I have shown the link code if you want to use a separate style sheet called style.css and add styles for links, etc. You can use a plain color or a normal image in the divs, although they will have to repeat vertically to cope with a flexible height.

These examples do not use the "faux-columns" method which uses a tiled background image. "Faux Columns" cannot use a color instead of an image and cannot have a flexible width with the fixed width image shown in the link. The next item is similar to the "Faux Columns" method.

 

Background-images full height of divs

17c green icon This is designed for side background-images. Two side divs each have a background-image positioned to the left or right and the divs are full-width nested inside a wrapper div. If used with a background-color in addition to the side background-image the background-color will cover the center content unless that has a background of its own.

Padding on the side divs needs to be at least equal to the background-image width to keep the content away from the side background-images; if the side padding is more than the background-image the excess will create a bit of padding for the center content. The background-image is actually in the padding; center content is nested so it is kept away from side images by padding in each parent side div. I have given the left side div padding left: 20px; with a background-image 7px wide, but for the right side div I have given it padding-right: only 7px so in some browsers at some text sizes the text reaches the background-image on the right.

You cannot give the side divs a width with this method because the width will be applied to the center content; use item 17a or 17b instead which keeps each side div in a separate container.

If you only have p tags in the center you will have to give the first p tag margin-top: 0; and the last p tag margin-bottom: 0; to allow the side background-images to extend full-height (they won't extend into the p tag margins) and you might still need to do this even if the center content p tags are inside a containing div, depending on the styles for the containing div, because the p tag default top or bottom margins seem to extend through the div box dimensions in some circumstances. I have given the first and last p tags padding-top or padding-bottom instead of margin.

The code is:-

I have shown all the styles as inline styles for clarity but you should put them in a class or id in a separate stylesheet.

 

Background-images full height of divs - any column tallest

17d green icon Items 16a and 17a allow one column to be the tallest and by nesting the tallest column inside the other(s) the background of the shorter column(s) is dragged down. More complicated nesting and movement sideways of the divs can allow any column to be the tallest, as described by Matthew James Taylor.

 

Background-images full height of divs - jQuery (JavaScript) method

17e green icon Items 16a and 17a use pure CSS to allow one column to be the tallest and by nesting the tallest column inside the other(s) the background of the shorter column(s) is dragged down.A jQuery method is described by Socreative and there are other jQuery codes if you search Google. Remember that users with JavaScript disabled won't see the equal height column backgrounds, but apart from that the page will display properly.

 

Display: table method. Background-colors or background-images full height

17f gold icon You can use display: table and display: table-cell for divs to show equal background heights whatvever content height they have, but IE6 and IE7 don't process this.

Content in #displaytablecell1 with display: table-cell; vertical-align: top; background: pink;
Text in #nested div background: lime;
#nested div is inside #displaytablecell2 with vertical-align: middle; background: azure
this #nested div is vertically centered
Content in #displaytablecell3 with display: table-cell; vertical-align: top; background: yellow;
All display: table-cell divs are inside containing div #displaytable with display: table;
More text
More text
More text

The CSS code is:-

Border: 1px solid black; and padding: 2px; is the default for all divs in the main stylesheet.

The HTML markup code is:-

Content in #displaytablecell1 with display: table-cell; vertical-align: top; background: pink;

Text in #nested div background: lime;
#nested div is inside #displaytablecell2 with vertical-align: middle; background: azure
this #nested div is vertically centered

Content in #displaytablecell3 with display: table-cell; vertical-align: top; background: yellow;
All display: table-cell divs are inside containing div #displaytable with display: table;
More text
More text
More text

 

Background-colors or background-images full height - display: table method - fluid width

17g gold icon You can use display: table and display: table-cell for divs to show equal background heights whatvever content height they have, but IE6 and IE7 don't process this.

Content in #displaytablecell2a with display: table-cell; vertical-align: top; background: pink; width: 15%;

 

Text in div #displaytablecell2b with display: table-cell; vertical-align: top; background: azure; width: 30%;

 

Content in #displaytablecell2c with display: table-cell; vertical-align: top; background: yellow; width: 48%;
All display: table-cell divs are inside containing div #displaytable2 with display: table;
More text
More text
More text

The CSS code is:-

Empty spacer divs 2% wide were used because margin doesn't process with display: tablecell which is an inline element and if converted to display: block; or display: inline-block; the heights will not be equal.

Widths are not necessary for the main divs as they will fill remaining space equally but different widths can be applied provided that the total of all including spacer divs is 100% or less.

The total width is 15% + 2% + 30% + 2% + 48% = 97% plus 2*3*1px = 6px side borders plus 2*3*2px = 12px side padding which amounts to between 2% and 3% of most window widths. Border: 1px solid black; and padding: 2px; is the default for all divs in the main stylesheet.

The HTML markup code is:-

Content in #displaytablecell2a with display: table-cell; vertical-align: top; background: pink; width: 15%;

Text in div #displaytablecell2b with display: table-cell; vertical-align: top; background: azure; width: 30%;

Content in #displaytablecell2c with display: table-cell; vertical-align: top; background: yellow; width: 48%;
All display: table-cell divs are inside containing div #displaytable2 with display: table;
More text
More text
More text

 

Faux-columns method. A four column layout using one background-image for all columns; called "Faux-columns"

18 green icon Another method to create a background-color or backgound-image over several columns that will extend down to the full extent of the column with most content is to make and use an image of the columns and set it as a background-image over which divs with text or other content are placed.

Items 16a and 17a will have increasingly complicated code if more than three columns are involved. This background-image method is, however, very inflexible for width or design. Once the background-image has been created it is time-consuming to amend it for width of columns since a new image must be created and divs altered to suit it.

The background-image can be in plain colors, in which case the image need only be 1px high and repeated vertically, or an image which will either have a fixed height which will restrict content shown over it or have a repeated image vertically. You can give the effect of vertical column borders by making a 1px or 2px black color between the different column colors.

Left div width: 143px; float: left;

Second div width: 144px; float: left;

Third div width: 294px; float: left;

Whatever height is created by one of the divs, the containing div with the background of four columns will extend vertically for all of them provided a clearer div is added below floated divs as item 2b above to drag the background-image down for the full height. Care is needed to position the divs accurately over the background-image.

Right div width: 123px; float: left;

 
 

This is the background-image which repeats vertically:-

Four color image

The code is:-

<div style="background-image: url(images/fourcolors730x5.jpg); background-repeat: repeat-y; padding: 0;">
<div style="width: 143px; float: left; border: none;">...</div>
<div style="width: 144px; float: left; border: none;">...</div>
<div style="width: 294px; float: left; border: none;">...</div>
<div style="width: 123px; float: left; border: none;">...</div>
<div class="fullwidth0pxhigh">&nbsp;</div> <!--clearer div-->
</div>

Remember that each div has default padding of 3px in my main stylesheet so the total width is 143+144+294+123 = 704 + 2*3px*4 = 728 + 2*1px border at each side = 730px equal to the image width.

This is the code for the clearer div:-

.fullwidth0pxhigh { clear: both; width: 100%; height: 0px; font-size: 0px; line-height: 0px; padding: 0; border: none; }

Liquid or fluid faux-columns method

If you have only two columns you can use a variation of faux-columns using a very wide background-image and use background-position with a % for x value as described in this tutorial:- communitymx.com.

 

Backgrounds full height of divs using position: absolute divs underneath to create the backgrounds

The following items show how to place position: absolute and position: fixed divs with background-colors or background-images under the divs which have different content heights so that the backgrounds are equal in height.

Other methods like the "faux columns" method with a background-image showing the column colors and using repeat-y to drag it down over the columns or the Matthew James Taylor method both only make the column heights the same, so they would both show a space between short height columns and a sticky footer, so my method cures that and suits a fluid width design.

19a green icon The example here shows position: absolute divs and can be used for more than two columns, but they must have fixed widths. You don't need to know in advance which column will need the most height.

19b green icon The example here shows position: absolute divs for three columns and the center column has a fluid width. This example also has a sticky footer.

19c green icon The example here shows position: fixed divs for three columns and the center column has a fluid width. This example also has a sticky footer.

Items 19b and 19c need significant styles and markup changes to work in IE6, but IE6 has so little use now that you may choose to ignore the IE6 codes.

 

Border images or shadow images all round a div

20 green icon The example here shows how to code border images which could be shadows. The top and bottom borders are small corner images floated left and right with a div in between. The central section is three divs; one left div 730px wide enclosing the right div which is float: right and the content div is nested inside the right div with float: left. This is another example of how background images or colors need to be "dragged down" in modern browsers by having some content inside the div.

 

Side background images extending full height in all situations

21 green icon The example here shows how side background images can be made to extend either to the window bottom if the page content has small height or to extend to the bottom of the content div if it exceeds the window height, in all cases retaining height flexibility if the window height varies or if the content height varies, for instance if someone increases text size or adds more content.

There are therefore two different objectives:-
- to extend side background images to the window bottom in any resolution (even with little content)
- to extend side background images to the bottom of the content div whatever height it needs

In the example there is enough in the content div to exceed most window heights and to demonstrate that the side background images extend to the bottom of the content div. If most of the content in the div is deleted so that it is much less than the window height, (or in Firefox if you reduce the text size several times), the side background images will still extend to the window bottom.

If either the side background image or the content div has a fixed height the solution is much simpler but it gets complicated if total height flexibility is required and also if the side background images are required to extend to the window bottom if there is not much content.

The side images are 17px wide and 13px high and repeat vertically.

The example also retains width flexibility so that the side background images are always at the window sides whatever resolution is used.


Notes

See w3.org's Box Model here.

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet examples.css.

The parent silver background color could be a background image. Use background-image: url(image-name.jpg) in div style.

The first examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been shown as inline styles in html markup tags in my examples rather than in a stylesheet or between head section style tags. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2012


top | Sitemap | prev | next

 

Google
web www.wickham43.net/