Forum Moderators: not2easy
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.
:)
[edited by: Attero at 4:31 pm (utc) on Aug. 24, 2008]
.container
{
padding:0;
}.container .content
{
position:relative;
top: #px; /*your padding*/
}
I haven't tried this with your code - but it should work.
Tables win :D
It don't believe the padding is the problem anyhow. The border will either not show at all, or with a min-height set it will show the min-height specified (in px, testing at 100px).
I need it to be the height of the container completely without the container being 100% so that the container is expandable.
I'm worried that with like most situations that involve the height being 100%, it won't be possible through what I'm doing.
[edited by: Attero at 9:43 am (utc) on Aug. 25, 2008]
Anywho, I was testing your code and I don't think it can work without tables. However, I was able to make it work with only turning 1 div (not the container) into a table:
<html>
<head>
<title>test</title> <style>
<!--
.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%;
background-color:blue;
float:right;
overflow:hidden;
}
.tclass .tb-right-background
{
background-color:blue;
}
-->
</style>
</head>
<body>
<div class="tclass" style="clear:both;">
<table class="tb-right">
<tr>
<td class="tb-right-background"></td>
</tr>
</table>
<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>
</body>
</html>
Hope that helps!
Ryan
I made .tb-right a container for the .head and .content class and now it expands perfectly with the content.
Thanks for your help anyway.
I was trying to maintain the inside structure so I didn't think of that - I'm glad you figured it out though.
Ryan
