[SOLVED] Border height problem

[Darklink]

Okay, so I am having this problem with an image border. I am making a shadow effect for the divs I am making and it's successful only until I want to be able to expand the div according the content within a child div.

 

Basically as it goes:

 

Parent div is simply a container for all the divs that make up the content, header and borders (it's not that complicated! Trust me on that).

The parent div does not have a set height nor does the content div because the content may be larger or smaller than the height specified so I want it expandable.

Floating to the right is the right border which is the only part that doesn't expand and if if I set the height to a 100% it simply disappears, which isn't really any use.

 

 

So what do I do?

 

CSS:

.tclass {
background: url(images/background/tborder_top.jpg) repeat-x; top;
min-height: 100px;
overflow: hidden;
}

.tclass .head {
	background: url(images/background/thead.jpg) repeat-x top;
	padding: 10px 20px 5px;
	height: 19px;
	color: #6a6a6a;
	text-align: right;
	font-weight: bold;
}

.tclass .content {
	background: url(images/background/tcontent.jpg) repeat-x top;
	height: 100%;
	color: #3d3d3d;
	overflow: hidden;
	padding: 15px 0px 15px 15px;
}

.tclass .tb-right {
	width: 8px;
	height: 100%;
	float: right;
	background: url(images/background/tborder_right.jpg) repeat-y right;
}

 

HTML:

<div class="tclass" style="clear:both;">
        <div class="tb-right"><div class="tb-topright"></div></div>
<div class="head">Title here</div>
        <div class="content">Content here</div>
<div class="tb-bottom"><div class="tb-bottomleft"></div><div class="tb-bottomright"></div></div>
</div>

 

Hope someone can give some suggestions. I'm expecting to hear, "you can't do this" as I know CSS can be an ass with these things.

 

[haku]

You have the right idea, but you are just a little off with it.

 

You want to put the div.head and div.contents inside the div.tb-right. Like this:

 

<div class="tb-right">
   <div class="head"></div>
   <div class="contents"></div>
</div>

 

and you want to set the background on it to be on the right side of the div, repeating only along the y-axis:

 

div.tb-right
{
   background: url(images/background/tborder_right.jpg) repeat-y top right;
}

 

By doing this, the div will expand to be as tall as the head and contents, as it is wrapped around them (note: won't work as is if you float head and/or contents).

 

There are a few things you will have to do:

1) you will have to inset div.head and div.contents 8 pixels in order to show the right border. Setting a right margin to those two divs is probably your best bet.

2) You will have to put the corners in somewhere. I'll leave it to you to figure out where.

3) You will have to make sure that div.head has no top margin, and that div.contents has no bottom margin, or else your border will be longer than necessary.

 

You can do the same thing for the left border as well - wrap it around the outside of div.head and div.contents. Then it too will expand as necessary.

[Darklink]

Absolutely brilliant. Don't know why I didn't think of doing that.

 

Thanks