PDA

View Full Version : Expand Middle Div



BrianDP1977
Aug 26th, 2007, 05:00 AM
I am brand new to html and css so this may be a noob question. I am trying to create an expanding header/border. I am currently using 5 divs:

1) fixedWindow: contains all elements on my site and defines the width and height of the the contants.

2) borderContainer: contains all the parts making up the border/header.

3) topBorder_L: houses and displays a gif of a rounded left corner of the border.

4) topBorder_R: houses and displays a gif of a rounded right corner of the border.

5) borderBody: contains a link and uses a repeating 1px wide gif to define the body portion of the header/border.

Currently, the borderContainer div has a width set to 100% so that it expands to the full size of the fixedWindow div. Next topBorder_L div is set to float left and display the appropriate gif for that corner. After that I define the border_body to float left and give it a set width (686px). Lastly, I set topBorder_R to float left and display the appropriate gif for the right corner. Instead of having to define a set width of the border_body div (currently 686px) I was wondering if there is a way to make it expand along with the borderContainer div which expands depending on how big I set the fixedWindw div to be. If I set the border_body div width to 100% so that it expands like the borderContainer div it kicks the topBorder_R and topBorder_L divs to other lines (for obvious reasons).

Here is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Border</title>
<style type="text/css" media="screen">
/* Body styles */
body {
margin: 0;
padding: 0;
color: #6B6B6B;
font-size: 10pt;
font-family: Verdana, Arial;
}

a:link,a:active,a:visited { text-decoration: none; color : #cccc99; }

#fixedWindow {
width: 750px;
height: 810px;
margin: null;
padding: null;
}

#borderContainer {
float:left;
margin: null;
paddin: null;
width:100%;
/*height: 100px;*/

}

#topBorder_L {
float:left;
margin: null;
paddin: null;
width:7px;
height: 25px;
background:url("border_top_left.gif") no-repeat left top;
}

#topBorder_R {
float:left;
margin: null;
paddin: null;
width:7px;
height: 25px;
background:url("border_top_right.gif") no-repeat left top;
}

#border_body {
float:left;
margin: null;
paddin: null;
width:686px;
height: 25px;
background:url("border_bg.gif") repeat-x bottom;
border-right: solid 1px #330000;
border-left: solid 1px #330000;
font-size:70%;
line-height: normal;
}

#border_body p {
float: right;
margin: null;
padding: 0 5px 0 10px;
font-weight: bold;
color: #cccc99;
}

</style>
</head>

<body>

<div id="fixedWindow">

<div id="borderContainer">
<div id="topBorder_L">
</div>
<div id="border_body">
<p><a href="#">Register</a> | <a href="#">Log In</a></p>
</div>
<div id="topBorder_R">
</div>
</div> <!-- borderContainer -->

</div> <!-- fixedWindow -->

</body>
</html>

I've attached gif files.

BrianDP1977
Aug 26th, 2007, 05:04 PM
I may have stumbled on the answer in these articles in case anyone is interested:

http://www.alistapart.com/articles/customcorners/

http://www.alistapart.com/articles/customcorners2