help with bottom margins
Posted: Fri Aug 04, 2006 7:02 pm
http://65.29.93.164/freegrabbag/
this page, is not displaying how i'd like it in IE or FireFox. What I would like for it to do is have the center column expand from the very top of the browser window, down to the very bottom
Something like this in ASCII
Except with no margin at the bottom 
I'm trying to get away from my table habits, and learn some solid CSS
this page, is not displaying how i'd like it in IE or FireFox. What I would like for it to do is have the center column expand from the very top of the browser window, down to the very bottom
Something like this in ASCII
Code: Select all
_____________________
| |
| |
| |
| |
| |
_____________________I'm trying to get away from my table habits, and learn some solid CSS
Code: Select all
<html>
<head>
<title>title</title>
<style type="text/css">
body {
/* Margins */
margin-top: 0px;
margin-bottom: 0px;
/* Background Image */
background-color: #F3F3F3;
background-image: url('images/bg_circle.gif');
background-repeat: repeat;
background-attachment: fixed;
/* Text Align */
text-align: center;
}
/* Master Div */
.masterDiv {
/* Size Properties */
width: 740px;
height: 100%;
/* Background */
background-color: #FFFFFF;
/* Left & Right Borders */
border-left: solid 1px lightblue;
border-right: solid 1px lightblue;
/* Margins */
margin-bottom: 0px;
}
.logoDiv {
/* Size Properties */
width: 100%;
height: 100px;
/* Border Properties */
border-bottom: solid 1px #CCCCCC;
}
.navDiv {
/* Size Properties */
width: 100%;
height: 30px;
/* Background Properties */
background-color: #3399CC;
/* Border Properties */
border-bottom: solid 1px #CCCCCC;
}
.contentDiv {
/* Size Properties */
width: 100%;
height: 100%;
/* Text Align */
text-align: left;
}
.sideDiv {
/* Size Properties */
width: 150px;
height: 100%;
/* Float */
float: left;
}
.middleDiv {
/* Size Properties */
width: 450;
height: 100%;
/* Float */
float: left;
}
.rightDiv {
/* Size Properties */
width: 130px;
height: 100%;
/* Float */
float: left;
}
.clear {
/* Clear Properties */
clear: both;
}
</style>
</head>
<body>
<center>
<div class="masterDiv">
<div class="logoDiv">LOGO HERE</div>
<div class="navDiv">Navigation Here</div>
<div class="contentDiv">
<div class="sideDiv">side</div>
<div class="middleDiv">middle</div>
<div class="rightDiv">right</div>
</div>
</div>
</center>
</body>
</html>