Forum Moderators: not2easy
Hey,
I'm learning to use CSS for layout rather than my more comfortable useage of tables. I've got the layout I want using divs but I've run into a little snag. If I don't have a doctype at the top, the page loads as it should (100% height) but I don't view it properly in Dreamweaver. If I have this doctype in there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then the page views properly in dreamweaver but cuts the div off at the bottom of the content (NOT 100% of the screen).
What can I do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testing</title>
<style TYPE="text/css">
body {
background-image: url('images/bkground.jpg');
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12;
text-align: center;
margin: 0px;
padding: 0px;
}
body a:link, body a:visited{
color: #09367A;
}
body a:active, body a:hover{
color: #006F6f;
text-decoration:none;
}
#wrap {
margin: 0 auto;
text-align: left;
border-left: 1px solid #000;
border-right: 1px solid #000;
width: 712px;
height: 100%;
padding: 5px;
background-color: #FFFFFF;
}
#header {
background:#ddd;
margin-bottom: 5px;
}
#header h1 {
padding:5px;
margin:0;
}
#nav {
background:#c99;
padding:5px;
margin-bottom: 5px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
#main {
background:#9c9;
float:left;
width:495px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background:#FFF;
border: 1px dotted;
float:right;
width:198px;
padding: 5px;
margin-bottom: 5px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer {
background:#cc9;
clear:both;
}
#footer p {
padding:5px;
margin:0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>Test Layout</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</div>
<div id="main">
<h2>Column 1</h2>
<p><a href="#">Home</a> ¦ <a href="#">Layout</a> ¦ <a href="#">Contacts</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius,
gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam
ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>
<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum
et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis
pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum
sem. Mauris </p>
</div>
<div id="sidebar">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
<li><a href="#">Link 13</a></li>
<li><a href="#">Link 14</a></li>
<li><a href="#">Link 15</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
