Question

I have the following HTML and CSS:

<div class="content">
  <div class="leftbg"></div>
  <div class="innercontent"><p>Some content goes here</p></div>
  <div class="rightbg"></div>
</div>

.content {
   overflow: hidden;
}
.leftbg {
background: url("./leftbg.png") repeat-y scroll top left transparent;
margin-left: 0;
float: left;
width: 10px;
}
.innercontent {
width: 600px;
float: left;
margin-left: 0;
}
.rightbg { /* similar to left bg except for the right side */ }

The problem that I am having is the leftbg image is only repeating until it reaches the height of the paragraph in the innercontent div. I am accessing a database to grab the content for the innercontent div and hence the content will be of variable height. Is there any way to make it so that it repeats until it reaches the bottom of the leftbg (and rightbg) div? What I mean by that is for it to repeat until it is at the bottom of the innercontent div without setting the height as static (e.g. height: 200px;) because the height will be variable.

Answer 1

This equal height column layout tutorial from smashing magazine might help you. With lot of explanation of all the whys.