Hi all,
Just come across a snag with my code.
The green box is div container, the white is div main and the red one is div sidebar.
I have set the container to a height of 200px just for this screen shot otherwise it disappears completely when set to auto. The height for all 3 divs needs to be set to auto due to the amount of content in the main div on some pages. Obvisouly I want to the sidebar to stretch to the same height as the main div despite how much is in there! Any advice?
html:
CSS:
Just come across a snag with my code.
The green box is div container, the white is div main and the red one is div sidebar.
I have set the container to a height of 200px just for this screen shot otherwise it disappears completely when set to auto. The height for all 3 divs needs to be set to auto due to the amount of content in the main div on some pages. Obvisouly I want to the sidebar to stretch to the same height as the main div despite how much is in there! Any advice?
html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/dropdown.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SunNet</title>
</head>
<body >
<div class="header">
<div class="menu">
<?php
include 'includes/menu.html';
?>
</div>
<div class="header_image">
<img src="images/img_header.jpg" alt="SunNet Header" width="768px" />
</div>
<div class="banner">
<div class="time">
<script type="text/javascript" src="scripts/time.js"></script>
</div>
</div>
</div>
<div class="container">
<div class="main">
<p>THIS IS A WORK IN PROGRESS</p>
<p>Our newsletter will go here!</p>
</div>
<div class="sidebar">
<p>SNIPPETS HERE</p>
</div>
</div>
<p><br />
THE END?!
<br /></p>
</body>
</html>CSS:
Code:
body {
text-align: center;
background-color: #455a8a;
}
p {
font-size: 10pt;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 10px;
font-family: Arial;
}
div.header {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
div.menu {
width: 770px;
margin-left: auto;
margin-right: auto;
height: 25px;
}
div.header_image {
width: 770px;
margin-left: auto;
margin-right: auto;
height: 104px;
border: 2px solid black;
text-align: center;
background: black;
}
div.banner {
width: 770px;
margin-left: auto;
margin-right: auto;
height: 20px;
background: black;
border: 2px solid black;
}
div.time {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 14px;
padding-left: 5px;
padding-top: 1px;
text-align: left;
background: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
font-size: 10px;
margin-top: 3px;
float: left;
}
div.container {
clear: both;
text-align: center;
margin-left: auto;
margin-right: auto;
font-family: Arial;
width: 774px;
height: 200px;
background-color: green;
}
div.main {
text-align: left;
margin-left: auto;
margin-right: auto;
font-family: Arial;
width: 594px;
height: auto;
background-color: white;
float: left;
border: 2px solid black;
}
div.sidebar {
text-align: Left;
margin-left: auto;
margin-right: auto;
font-family: Arial;
width: 174px;
height: auto;
background-color: red;
color: white;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float: right;
}