CSS Content Boxes

[Bradster]

I know you have probably seen a thread like this a million times before, but I cannot find a tutorial or reference that will show me the way to do content boxes, the way I want.

I want an absolute 100% fluid content box, expandable height and width, with no way it can go wrong. At the moment it works perfectly but there must be some way to make it shorter, here is what I have at the moment.

<style>
body {
margin:200px auto;
color:#FFF;
background:#000;
font-family:verdana;
font-size:12px;
width:400px;
}
.content-fluid {
background:url(./images/core/content-bg.gif);
width:400px;
}
.content-header {
line-height:30px;
padding-left:10px;
color:#CC9900;
font-weight:bold;
}
.content-body {
padding:10px;
}
.content-tl {
background:url(./images/core/content-tl.gif) top left no-repeat;
}
.content-tr {
background:url(./images/core/content-tr.gif) top right no-repeat;
}
.content-bl {
background:url(./images/core/content-bl.gif) bottom left no-repeat;
}
.content-br {
background:url(./images/core/content-br.gif) bottom right no-repeat;
}
.content-l {
background:url(./images/core/content-l.gif) left repeat-y;
}
.content-r {
background:url(./images/core/content-r.gif) right repeat-y;
}
.content-b {
background:url(./images/core/content-b.gif) bottom repeat-x;
}
.content-t {
background:url(./images/core/content-t.gif) top repeat-x;
}
</style>
<div class="content-fluid">
<div class="content-l">
<div class="content-r">
<div class="content-b">
<div class="content-t">
<div class="content-tr">
<div class="content-bl">
<div class="content-br">
<div class="content-tl">
<div class="content-header">
Topic Title
</div>
<div class="content-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

And a small image to show what it looks like. <>

[edited by: SuzyUK at 6:23 pm (utc) on June 11, 2008]
[edit reason] sorry no personal links, see charter, code is fine [/edit]

[bluesmandeluxe]

First of all, your can't have a "liquid" layout and designate fixed pixel widths/heights.

Everything must use "variable" dimensions (incl. text).

Here is a great "elastic/liquid" site and the article how it was done.<>

[edited by: SuzyUK at 9:21 pm (utc) on June 11, 2008]
[edit reason] sorry no non authority links, see charter [/edit]

[Xapti]

This is called "rounded corners" or custom image borders (can search for that). It can be done with probably at most half the number of divs.

[Bradster]

First of all, your can't have a "liquid" layout and designate fixed pixel widths/heights.

Everything must use "variable" dimensions (incl. text).

Here is a great "elastic/liquid" site and the article how it was done.

I used a fixed width of my content box as an example, just to make it easier to see on the image.

But thanks for the information on what type of content box it is.