How can I expand div height in a parent div?

Hi,

I’m building my first website for a friend’s photography business and the design has two banners across the top followed by a left and right decorative column, main content in the middle and a footer. A bit like this:

--------------------------
--------------------------
--------------------------
--------------------------

The left and right columns only contain an image for decoration and the left column, right column and center areas are seperate divs within a ‘container’ div and the columns floated l/r (see code below).

My problem is that as the ‘center’ div expands downward to accomodate each page’s content I can’t seem to make the l/r columns stretch vertically alongside it meaning I end up with empty white blocks under the columns :frowning:

Here’s the code - I haven’t included that for the headers/footer as I’m not sure it’s relevant?

Thanks for any suggestions!

CSS:
#container {
height:100%;
height:auto;
min-height:457px;
width:100%;
margin:0px;
overflow:auto;
padding-bottom: 40px;

#leftcolumn {
float:left;
width:78px;
min-height:457px;
background:url(‘…/images/leftcolumn.png’);
background-repeat:repeat-y;

#center {
margin-left:78px;
margin-right:78px;
padding:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-style:normal;
color:#603913;

#rightcolumn {
float:right;
width:78px;
min-height:457px;
background:url(‘…/images/rightcolumn.png’);
background-repeat:repeat-y;

HTML:
<div id=“container”>
<div id=“leftcolumn”></div>
<div id=“rightcolumn”></div>
<div id=“center”></div>
</div>

P.S. Any feedback in general would be cool - like I said this is my first effort! :slight_smile:

What I would do is to nest the <div>s, so that the <div> with the content is inside the div with the right-hand image, which is inside the <div> with the left-hand image.

Haven’t got time to sketch out the code right now, but hopefully that will point you in the right direction - if not, I’ll check back later on and give some more suggestions.

Hi Stevie D, thanks for this. I get the gist of what you mean, but I’m not clear on how it would work or how to code unfortunately :frowning: (I’m very new at this!)
Any tips would be great!
Thanks :slight_smile:

Ok, I stopped being a wuss, manned up and made some rubbish code - and it works!

This is what I’ve come up with:

HTML:


	<div id="container">
		<div id="leftcolumn">
		<div id="rightcolumn">
		<div id="center">
                </div>
		</div>
		</div>		
	</div>

CSS:


#container {
	height:100%;
	height:auto;
	min-height:457px;
	width:100%;
	margin:0px;
	overflow:hidden;
	table-layout:fixed;
}		
#leftcolumn {
	float:left;
	width:100%;
	min-height:457px;
	background:url('../images/leftcolumn.png');
	background-repeat:repeat-y;
}
#rightcolumn {
	float:right;
	margin-left:78px;
	width:100%;
	min-height:457px;
	background:url('../images/rightcolumn.png');
	background-repeat:repeat-y;
	background-position:right;
}
#center {
	float:left;
	margin-right:78px;
	margin-left:78px;
	padding:15px;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:medium;
	font-style:normal;
	color:#603913;
}

As per your suggestion Stevie D, content added in the ‘Center’ div stretches the parent and the border images repeats as needed :slight_smile:

Any suggestions/improvements gratefully received

I’ll try and put a live link up ASAP. Thanks so much!