I have the following HTML page (actually, it's derived from a PHP page but the output is the important side) and the following CSS document. The problem is that, despite the area_left and area_right being wrapped in div main when I place borders as visible I note that their lengths do not cause the main div to increase in height (it remains a collapsed div). I need main to expand with these since without it expanding (and content_main expanding) the content_bottom does not move in relation and so the page does not grow naturally.
To see what I mean simply extend the content of area_left to see the results.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="rro.css" rel="stylesheet" type="text/css"> <title>Welcome to Revision Rocks Online</title>
</head>
<body>
<div id="container">
<div id="content_top">
<div>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Welcome, Mr Admin. |
<a href="index.php?action=control">Control</a>
|
<a href="./cmsadmin/login.php?action=logout">Logout</a>
</font>
</div>
</div>
<div id="content_main">
<div id="main">
<div id="area_left">duck duck goose goose
</div>
<div id="area_right">
<div id="MSG" style="left: 620px;">
<div id="MSG_Top">
Latest Information
</div>
<div id="MSG_Main">
<p><a href="article.php?id=4&act=v">One Flew</a></p>
<p><a href="article.php?id=2&act=v">Second World War</a></p>
<p><a href="article.php?id=1&act=v">Of Mice and Men</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="content_bottom">
<div style="width: 500px; left: 200px;">
<img src="images/valid-html401.png" alt="Valid HTML 4.0" style="float: left; left: 35px;" />
Copyright Revision Rocks Online ©2010 ¦ Contact Us ¦ About Us
<img src="images/vcss.gif" alt="Valid CSS 2.1" style="float: right" />
</div>
</div>
</div>
</body>
</html>
Code: Select all
@charset "utf-8";
/* CSS Document */
/* MAIN DOCUMENT INFORMATION */
body
{
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
img
{
border-style: none;
}
#container
{
margin: auto;
padding: 0;
margin-left: auto;
margin-right: auto;
height: auto;
width: 900px;
border: 1px solid #000;
}
#content_top
{
height: 145px;
width: 900px;
background: #eee url(images/bcktop.png) center top no-repeat;
text-align: right;
/* border: 1px solid #0f0; */
}
#content_top div
{
position: relative;
top: 110px;
text-align: right;
padding-right: 85px;
}
#content_top a
{
color: #000;
text-decoration: none;
}
#content_top a:hover
{
color: #00f;
text-decoration: underline;
}
#content_main
{
width: 900px;
min-height: 200px;
background: #eee url(images/bckmid.png) center top repeat-y;
border: 1px solid #f00;
}
#content_bottom
{
height: 128px;
width: 900px;
background: #eee url(images/bckbot.png) center bottom no-repeat;
}
#content_bottom div
{
position: relative;
top: 40px;
text-align: center;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#main
{
position: relative;
width: 830px;
left: 35px;
border: 1px solid #0f0;
}
#anchor1
{
height: 140px;
width: 100px;
margin-left: 100px;
background: url(images/button.png) center center no-repeat;
}
#anchor1:hover
{
height: 140px;
width: 100px;
margin-left: 100px;
background: url(images/button_dn.png) center center no-repeat;
}
/* MESSAGE BOX PARAMETERS */
#MSG
{
border: #7E58AC 1px solid;
width: 200px;
min-height: 20px;
background-color: #FFFFFF;
}
#MSG_Top
{
width: 100%;
height: 12px;
background-color: #7E58AC;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 10px;
text-align: center;
font-weight: bold;
}
#MSG_Main
{
width: 100%;
height: 100%;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
#MSG_Main p, #MSG_Main a
{
font-size: 10px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
}
#MSG_Main a:hover
{
color: #00f;
text-decoration: underline;
}
/* Posting Space */
#area_left
{
float: left;
min-width: 200px;
border: 1px solid #00f;
}
#area_right
{
float: right;
border: 1px solid #0ff;
}
/* Article Space */
#article
{
width: 600px;
border: 1px solid #ff0;
}