No replies
Hugo's picture
Last seen: 8 years 4 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

I thought that some very basic notes and pointers on this subject might be helpful to newcomers.
It's not intended to be in depth rather to initially guide people to the right sorts of resources.
Any thoughts on improvements that could be made or additions will be helpful

For problems associated with expanding or stretching columns
A few points are worth considering

1/ Are you using position absolute as your means of positioning your main containers? if the answer is yes it is best to state that generally using position absolute for layouts does have it's problems chief amongst them being the fact that to give a position absolute removes the div from the flow of the page this means that it's relationship to the other divs is reduced as it in effect exists in it's own space on the page without regard for other items therefore if you perceive an absolute div to be within another container div if it expands it will have no effect on the parent container.

This link explains the use of position absolute and layout flow and is worth reading

and this link is very helpful in understanding how layout flow works and gives some good detail on the behavior of absolute positioning.

2/ If the effect you are after is for the column to expand forcing the parent container with it then you really need to use the float method ( this is especially true if you are dealing with dynamically Generated content such as a blog) as you can then use a clearing fix to force the parent container around the float this is necessary due to the fact that the correct behavior of a floated element is to break through it's containing div, bearing in mind that the float property was introduced to provide the word wrap around an image effect rather than as a positioning tool. the only browser to break this convention is IE which will automatically expand an element around a float; therefore the clearing rule is used to expand containers in more standards compliant browsers such as Firefox.

these links provide a better understanding of the float principle and the methods used to provide a clearing fix

3/ The other common problem is one of creating the effect of equal height columns;where one column is longer than the other but you wish to have the effect of the shorter column running to the bottom of the main wrapper/container here an effect called 'Faux columns' is often employed whereby you use an image repeated vertically to achieve the illusion and is discussed on A List Apart's site

These notes are intended as a guide to tackling some of the more common problems but are by no means exhaustive. The links provided are tried and tested methods and come from some of the more respected sites on the internet dealing with CSS issues and are a must read if you wish a better understanding of CSS

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me