Fluid Box with Borders that Adjust to content.

eteich

07-02-2010, 12:50 AM

So I've been trying to assemble a bunch of divs into a box that I can put content into

The CSS I'm using is:
<style type="text/css">
#UL {
float:left;
height:25px;
width:25px;
}
#UR {
float:left;
height:25px;
width:25px;
}
#UP {
background-image:url(UP.jpg);
background-repeat:repeat-x;
float:left;
height:25px;
width:100%;
}
#DL {
float:left;
height:25px;
width:25px;
}
#DR {
float:left;
height:25px;
width:25px;
}
#DN {
background-image:url(DN.jpg);
background-repeat:repeat-x;
float:left;
height:25px;
width:100%;
}
#RT {
background-image:url(RT.jpg);
background-repeat:repeat-y;
float:left;
width:25px;
height:100%;
}
#LF {
background-image:url(LF.jpg);
background-repeat:repeat-y;
float:left;
width:25px;
height:100%;
}
#SDD_CONTENT {
background-color:#000;
height:100%;
width:100%;
float:left;
overflow:visible;
}
#SDD_CONTAIN {
height:600px;
min-width:600px;
float:left;
overflow:visible;
}
#SDD_TOP {
height:25px;
width:600px;
float:left;
overflow:visible;
clear:both;
}
#SDD_BOTTOM {
height:25px;
width:100%;
float:left;
overflow:visible;
}
#SDD_MIDDLE {
height:100%;
width:100%;
float:left;
overflow:visible;
}
</style>

The structuring is:

<div id="SDD_CONTAIN">


<div id="SDD_TOP">
<div id="UL"><img src="UL.jpg"></div>
<div id="UP"></div>
<div id="UR"><img src="UR.jpg"></div>

</div>



<div id="SDD_MIDDLE">

<div id="LF"></div>

<div id="SDD_CONTENT">Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente </div>

<div id="RT"></div>

</div>



<div id="SDD_BOTTOM">

<div id="DL"><img src="DL.jpg"></div>
<div id="DN"></div>
<div id"DR"><img src="DR.jpg"></div>

</div>


</div>


I can't manage to get things to stay where they need to be with out exact sizies. DO I need to apply some padding-left and padding-right into The #up, #dn and #sdd_content to get the objects left and righ of them to display inline.

Also how do I get the #RT and #LF divs to actually expand to 100% of the vertical space within the #middle div?

Should I make them in to classes with in the divs?

ANy help would be greatly appreciated.

mbaker

07-02-2010, 06:01 PM

The following (which is based on http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml) may be a simpler way of achieving the effect you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Fluid Box</title>
<style type="text/css">
html, body { height: 100%; } /* required so inner elements can have a height to be 100% of */
#UP { /* top edge */
background:url(UP.jpg) 0 0 repeat-x; width: 100%;
height: 100%;
}
#DN { /* bottom edge */
background:url(DN.jpg) 0 100% repeat-x;
height: 100%;
}
#LF { /* left edge */
background:url(LF.jpg) 0 0 repeat-y;
height: 100%;
}
#RT { /* right edge */
background:url(RT.jpg) 100% 0 repeat-y;
height: 100%;
}
#DL { /* bottom left */
background:url(DL.jpg) 0 100% no-repeat;
height: 100%;
}
#DR { /* bottom right */
background:url(DR.jpg) 100% 100% no-repeat;
height: 100%;
}
#UL { /* top left */
background:url(UL.jpg) 0 0 no-repeat;
height: 100%;
}
#UR { /* top right */
background:url(UR.jpg) 100% 0 no-repeat; padding:30px;
height: 100%;
}
#SDD_CONTENT {
height:100%;
width:100%;
overflow:visible;
}
#SDD_CONTAIN {
height:100%;
background:black;
color:white; /* always set contrasting colour to background */
}
</style>
</head>
<body>

<div id="SDD_CONTAIN">

<div id="UP"><div id="DN"><div id="LF"><div id="RT"><div id="DL"><div id="DR"><div id="UL"><div id="UR">


<div id="SDD_CONTENT">
<h1>Fluid Box</h1>

<p>
Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente
</p>
</div>


</div></div></div></div></div></div></div></div>

</div>

</body>
</html>

ameenudeen

07-03-2010, 06:34 AM

Hi,

When you play around with multiple DIV that is using div inside div's it is always better to specify the height and width to all the div's, to display set of div in line you can use display:inline css or span tags inside div's for some cases and use display:inline css.

Regards
Ameen