How to control the heights of elements?

[Peep]

Lets say I have a wrapper with a background colour of black;

 

#wrapper {
text-align: left;
width: 981px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-color: #000;
}

 

And lets say within that wrapper I have the following elements which make up a two column layout;

 

#main {
background-color: #FFF;
float: left;
width: 640px;
margin-top: 10px;
margin-bottom: 15px;
margin-left: 10px;
border: 1px solid #000;
}

 

 

#rcol {
background-color: #FFF;
float: right;
width: 307px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
padding-top: 10px;
border: 1px solid #000;	

 

 

Both elements will expand in height depending on how much content is contained inside. However if I have more content in one or the other, there will be a height difference between the two elements and the colour of the wrapper will show through at the bottom of one of them.

 

What are the ways to get around this design problem?

[Wickham]

A frequently asked question, but quite difficult to deal with if you have fluid width columns.

 

However, you have a fixed width #wrapper with two floated divs inside, so the easiest method is "faux-columns" which means creating an image for the wrapper width x say 5px high with the two colors of the columns (and any borders between them if you want) and using repeat-y to repeat that background-image down behind the two columns. See

http://www.wickham43.net/firefoxbackground.php#faux-columns

 

Item 19 is another solution for fixed width columns.

 

Items 16 to 19 on the same link show other solutions, some are for fluid width columns.

Edited January 19, 2012 by Wickham

[Peep]

OK thanks, do we have a tutorial anywhere on here on working with images in CSS in regards to doing the "repeat" thing, as I did want to learn this anyway (so that I can add shadow effects to certain elements).

[Wickham]

There's probably a Killersites video tutorial (Killersites Network, top right) or have a look at this:-

http://www.wickham43.net/generaladvice.php#backgroundimages

or http://www.w3schools.com/cssref/pr_background-position.asp