Heights messing up

I have a div container with 3 divs in it. Two divs on the left and right which are the borders and one in the center which is for the content. If the container is a fixed height everything is fine, but if i make the containers height 100% or auto or just dont declare it the border divs disappear (im pretty sure there height is just 0) but the center div still appears the right height.

The border divs height is set to 100%.

You can download the files to look at the code here:

http://www.awestyproductions.com/redloF weN.zip

 

I'm having 'difficulty' making heads or tails of what you are trying to do from the code... but from your description it sounds like you should be nesting the tags instead of floating them.

I assume this:
<div id="SideBarRight"><!----></div>
<div id="CenterColumn">
<div id="SideBarLeft"><!----></div>

Is the part you are referring to...

For what you want, I would change that HTML to:

<div id="SideBarRight">
	<div id="SideBarLeft">
		<div id="CenterColumn">   

Code (markup):

(be sure to close those AFTER your content)

and make the CSS:

#SideBarLeft {
	padding-left:125px;
	background:url(side_tile.png) top left repeat-y;
}

#SideBarRight {
	padding-right:125px;
	background:url(side_tile.png) top right repeat-y;
}

#CenterColumn {
	background:url(center_image2.png);
}

Code (markup):

That should do what you want.

I attached a .zip of the full 'fixed' code. I would also suggest axing the presentational 'center' tag for a wrapper with text-align:center; - and change that list to a LIST... and probably make the 'header' a H1 tag with an image replacement technique so you aren't 'jumping' to a H2.

 

Maybe I'm missing something, and I didn't see your page because I won't open zip files, but if your left and right divs do not have content and only act as colored borders, then why don't you throw them out and simply apply right and left border specs to your center div? I must be missing something because it sounds too easy.

 

He's putting images on them, not just colors.


This:
http://battletech.hopto.org/for_others/awesty/template.html

is how I would have coded that page - the directory:
http://battletech.hopto.org/for_others/awesty/template.html

is unlocked to make grabbing the little bits and pieces easier.

validates XHTML 1.0 strict, tested in IE 6, 7, FF, Opera and Safari, uses a good deal less containers, shaving off about a half k of HTML. I used a 'trick' to put the center area background on the body tag, then put the two side images in as wrappers around the whole thing. I axed the target="_blank" rubbish since that's 'impolite' - there's a REASON those were pulled from the specifications.... I turned the header into a H1 with an image replacement technique - could NOT use the method I prefer on that because it's a transparancy so the slide the text offscreen is 'good enough'... and made the menu a list.

 

deathshadow, Thanks heaps.