Wickham's XHTML & CSS tutorial

Sitemap | Home | Search

Scrolling divs and overflow: hidden

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

Scolling divs in isolation are simple and reliable but the following examples show that when adjacent to other divs with scroll attributes there can be problems. Either Firefox and IE6 displays in an undesirable way or both have problems.


Overflow: scroll; and overflow: auto;

The overflow properties are: visible, hidden, scroll or auto. See w3schools.
There are usually no problems if you have an overflow property in an isolated div but problems do arise if you have divs with an overflow property next to each other, as shown below.

1 red icon green icon Safari and Chrome do not render the top right div with margin-left as they should. If the overflow: auto is removed, as in the lower example, they render it as expected.
IE takes the margin-left from the containing div whether or not the div has overflow: auto.

<div style="float: left; width: 170px; height: 100px; background-color: pink; overflow: auto; border: 1px solid black;"> (border in stylesheet)
This is overflow: auto; but only creates a vertical scrollbar because the words are short enough to wrap and don't need extra width.
This div is <div style="margin-left: 178px; height: 100px; background-color: azure; border: 1px solid black; overflow: auto;"> (border in stylesheet)
Apart from the addition of overflow: auto; and height: 100px; this is the same as item 9 on Two and three column layouts but Safari and Chrome don't extend the div to the right side of the page container; it reduces the width by the width of the margin-left.
The div below, with the same code but without overflow: auto; creates the width as it should in Safari and Chrome.
More text
More text
slow worm
This div is <div style="margin-left: 178px; background-color: azure; border: 1px solid black;"> (border in stylesheet).
This div, with the same code as the one above but without overflow: auto; creates the margin-left as it should in Safari and Chrome.
 
The div on the left is <div style="clear: both; float: left; width: 170px; height: 190px; border: 1px solid black; overflow-x; scroll; overflow-y: hidden; padding: 0;"> (border in stylesheet) and has an image in it 200 x 200px. The div is only width: 170px so it creates a horizontal scrollbar. The div is only height: 190px for an image 200px high but does not create a vertical scrollbar because the div has overflow-y: hidden.
 

2 green icon green icon The top right div is is the same as above but does not have margin-left: 178px; and all browsers render it correctly. The bottom right div has height: 230px and overflow: scroll.

<div style="float: left; width: 170px; height: 100px; background-color: pink; overflow: auto; border: 1px solid black;"> (border in stylesheet).
This is overflow: auto; but only creates a vertical scrollbar because the words are short enough to wrap and don't need extra width.
This div is <div style="height: 100px; background-color: azure; border: 1px solid black; overflow: auto;"> (border in stylesheet) (no margin-left as in item 1).
Safari and Chrome render it correctly like IE this time.
Apart from the addition of overflow: auto; and height: 100px; this is similar to item 2 on Two and three column layouts. This right div has no width stated and no float but is default width: 100% and moves up into the space next to the left floated div.
More text
More text
More text
slow worm
This div is <div style="height: 230px; background-color: azure; border: 1px solid black; overflow: scroll;"> (border in stylesheet).
This div has the same code as the one above but with overflow: scroll instead of overflow: auto; which makes no apparent difference. There are some instances with IE where overflow: scroll will show a dummy scrollbar if a scrollbar is not required but overflow: auto; will not show the dummy. The horizontal scrollbar doesn't show because text wraps and so extra width is not required.
 
Normally when the right div extends lower than the left div it would wrap under it but here it will not wrap unless the left div is less than height: 230px and height of this div is omitted and also the overflow: scroll or auto is omitted.
 
The div on the left is <div style="clear: both; float: left; width: 170px; height: 190px; border: 1px solid black; overflow-x; scroll; overflow-y: hidden; padding: 0;"> (border in stylesheet) and has an image in it 200 x 200px. The div is only width: 170px so it creates a horizontal scrollbar. The div is only height: 190px for an image 200px high but does not create a vertical scrollbar because the div has overflow-y: hidden.
More text
More text
More text
More text
More text
More text
More text
 

3 red icon red icon These examples have float: left and float: right divs but Firefox and IE have different problems. These examples are wrongly coded whether or not there is overflow stated.
Margin-left with float-right will always cause problems. If the margin-left is removed, Firefox will extend full width of the containing div under the left div while IE6 shows the div nearly against the left div which is almost what is expected.

<div style="float: left; width: 170px; height: 100px; background-color: pink; overflow: auto; border: 1px solid black;"> (border in stylesheet)
This is overflow: auto; but only creates a vertical scrollbar because the words are short enough to wrap and don't need extra width.
This div is <div style="float: right; height: 100px; margin-left: 178px; background-color: azure; border: 1px solid black; overflow: auto;"> (border in stylesheet). Firefox and IE should sit against the left div which has float: left. It must be affected by the float attributes in either the left div or this one.
More text
More text
More text
More text
More text
More text
More text
slow worm
This div is <div style="float: right; margin-left: 178px; background-color: azure; border: 1px solid black;"> (border in stylesheet).
Firefox and IE should sit against the left div which has float: left but it must be affected by the float attributes in the left div.
IE takes its margin-left from the left div which leaves a gap while Firefox has the correct width but sits below the level of the left div.
 
The div on the left is <div style="clear: both; float: left; width: 170px; height: 190px; border: 1px solid black; overflow-x; scroll; overflow-y: hidden; padding: 0;"> (border in stylesheet) and has an image in it 200 x 200px. The div is only width: 170px so it creates a horizontal scrollbar. The div is only height: 190px for an image 200px high but does not create a vertical scrollbar because the div has overflow-y: hidden.
 

4 green icon red icon These examples have float: left and float: right divs. The right divs have a width: 544px. The lower azure div is identical to the upper one except for a different height.

<div style="float: left; width: 170px; height: 100px; background-color: pink; overflow: auto; border: 1px solid black;"> (border in stylesheet)
This is overflow: auto; but only creates a vertical scrollbar because the words are short enough to wrap and don't need extra width.
This div is <div style="float: right; width: 544px; height: 100px; background-color: azure; border: 1px solid black; overflow: auto;"> (border in stylesheet). This is similar to item 1 on Two and three column layouts.
Firefox and IE both display correctly against the left div which has float: left.
More text
More text
More text
More text
More text
More text
More text
slow worm
This div is <div style="float: right; width: 544px; height: 230px; background-color: azure; border: 1px solid black; overflow: auto;"> (border in stylesheet).
This div is similar to item 1 on Two and three column layouts but Firefox and IE both show below the left div instead of beside it.
This div has the same code as the one above but it must be affected by the float attributes in the left div which has overflow-x: scroll and overflow-y: hidden whereas the pink div has overflow: auto.
 
The div on the left is <div style="clear: both; float: left; width: 170px; height: 190px; border: 1px solid black; overflow-x; scroll; overflow-y: hidden; padding: 0;"> (border in stylesheet) and has an image in it 200 x 200px. The div is only width: 170px so it creates a horizontal scrollbar. The div is only height: 190px for an image 200px high but does not create a vertical scrollbar because the div has overflow-y: hidden.
More text
More text
More text
 

Width issues generally and overflow: hidden

5 green icon Various ways of dealing with an image which is wider than its containing element.

5a If you put an oversize image in an element like a div, table or p tag the containing element will normally expand to show the whole image even if the element has a stated width that is less. The following div is 150px wide but the image still shows its basic width of 200px (note that in Firefox and IE7 the margin: auto is based on the smaller div width rather than the final width including the larger image while IE6 calculates the margins from the larger width):-

<div class="noborder" style="width: 150px; margin: auto;">
<img src="images/horses200x50.jpg" alt="horses"/>
</div>

horses

5b If you have an containing element with a fixed width and you give a larger image the same width, it will have its width reduced and also its height in proportion if no height is stated, like the following example. The code is:-

<div class="noborder" style="width: 150px; margin: auto;">
<img style="width: 150px;" src="images/horses200x50.jpg" alt="horses"/>
</div>

horses

5c If you add overflow: scroll or overflow: auto attributes to an element with a fixed width, then you will see the horizontal scrollbar when a larger image is inserted.
However, if you add overflow: hidden to the containing element an image which is larger than the containing element will have its right side cut off and the height will not be adjusted. If you are creating a template where someone else might inadvertently insert an image larger than the containing element, this attribute would be a safety measure to stop the containing element expanding and wrecking the layout. Smaller images will not fill the width but this is usually less of a problem.
The following div is 150px wide with an image 200px wide and has this code:-

<div class="noborder" style="width: 150px; overflow: hidden; margin: auto;">
<img src="images/horses200x50.jpg" alt="horses"/>
</div>

horses

5d If you don't want to see the scrollbar when an image larger than the containing element is inserted in a div with overflow: scroll or overflow: auto attributes but you do want to see the whole of a larger image even if it is reduced in width and its height is reduced in proportion, then you can use max-width code as shown on Maximum and minimum width. This will reduce the width of an image that is larger than the containing element without enlarging an image which is smaller as would happen in item 5b.


The CSS Clip property

6 green icon The clip property enables you to clip the side, top or bottom of an image in different amounts to make it fit in an element of a certain size, and show the important part of the image without cutting off everything from one side or the same amount from all sides.

See w3schools for details.

See also item 5c which can cut off the side of an image using overflow: hidden without reducing the overall size of the image to fit an element size.


Notes

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

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

The 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 put in html tags in my examples rather than in a stylesheet or in a style in the head. 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 xhtml code tags which are to be activated.

© Wickham 2006


top | prev | next

 

Google
web www.wickham43.com/