Hello:
I'm relatively new to CSS, and I'm doing a site where I don't want to
use any tables.
I've gotten pretty far, and the site has the layout I want. My only
problem is that I'm using the flot positional paremter a lot on
containers, and it really seems to do what I want. Except when I put
other containers in these containers, they don't expand vertically
like I want. Here's the stylesheet:
/* ****** CONTAINERS ******* */
#container
{
margin: 0 auto;
width: 1000px;
padding: 0 10px 0 10px;
text-align: left;
position: relative;
border: 1px solid red;
}
* html #container
{
width: 1024px;
margin: 0 auto;
position: relative;
border: 1px solid black;
}
#container #header
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin-top: 10px;
width: 1000px;
height: 80px;
border: 1px solid black;
}
#container #header #leftHeader
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 800px;
height: 80px;
}
#container #header #acctManagement
{
position: absolute;
top: 0px;
left: 800px;
right: 0px;
bottom: 0px;
width: 200px;
height: 80px;
border: 1px solid black;
}
#container #body
{
position: relative;
color: #ffffff;
width: 1000px;
margin-top: 10px;
margin-bottom: 10px;
text-align: right;
padding: 0 0 0 0;
border: 1px solid black;
}
#container #footer
{
position: relative;
color: #ffffff;
height: 25px;
width: 1000px;
margin-top: 10px;
margin-bottom: 10px;
text-align: right;
padding: 0 0 0 0;
border: 1px solid green;
}
#container #center
{
position: absolute;
top: 97px;
left: 205px;
right: 0px;
bottom: 0px;
color: #ffffff;
height: 300px;
width: 495px;
margin-left: 5px;
text-align: right;
border: 1px solid blue;
}
#right
{
position: absolute;
top: 97px;
left: 705px;
right: 0px;
bottom: 0px;
color: #ffffff;
height: 300px;
width: 295px;
margin-left: 10px;
text-align: right;
border: 1px solid blue;
}
#right2
{
float: top;
float: right;
color: #ffffff;
height: 400px;
width: 295px;
margin-left: 10px;
text-align: right;
border: 1px solid blue;
}
#center
{
}
#container #left
{
float: left
color: #ffffff;
width: 190px;
height: 300px;
margin: 5px 5px 5px 0px;
text-align: right;
padding: 0 0 0 0;
border: 1px solid red;
}
And now the file (these are just files i"m working with in order to
get the layout I want:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="stylesheets/
standard.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="leftHeader"></div>
<div id="acctManagement"></div>
</div>
<div id="container">
<div id="right2"></div>
<div id="left"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
What I don't understand is why a container as a float won't
automatically expand. is there another option I shoudl be looking
into?
Thanks very much in advance!
Mike
