I'm having trouble with a nested div which is becoming separated from its parent div. The parent div is #page and has a background color and border which I want for the whole page. I'm trying to split the page into two columns using floats. But these become separate from the page div and the background and border end where these divs begin. (I noticed that removing the doctype resulted in the what I was after.)
What am I doing wrong here?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Why is this wrong?</title>
<style type="text/css" media="screen">
body{
margin:5px;
background:#333;}
#page{
width:100%;
height:100%;
background:#666;
border:1px solid blue;
}
#leftcol{
width:42%;
float:left;}
#maincol{
width:42%;
float:left;}
p{
color:#fff}
</style>
</head>
<body>
<div id="page">
<div id="head">
<h3>HEAD</h3>
</div><!-- head -->
<div id="leftcol">
<p>Left column</p>
</div><!--leftcol-->
</div> <!--page-->
</body></html>
(...The #head div is fine because it's not being floated, I guess.) |
