Forum Moderators: not2easy
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sheets/obj.css" />
<link rel="stylesheet" type="text/css" href="sheets/color.css" />
</script>
</head>
<body>
<div id="main">
<img class="note" src="images/8note.png">
<div class="lpic">
<img class="rlight" src="images/lightningR.png">
</div>
<div class="vid">
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1">
</param><param name="allowFullScreen" value="true">
</param><embed src="http://www.metacafe.com/fplayer/327372/paintball_head_shot.swf" width="400" height="345" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowFullScreen="true"> </embed></object>
</div>
<div class="menu">
<ul><a name="menul"></a>
<li><a href="vids">More Vids</a></li>
<li><a href="pics">Photos</a></li>
<li><a href="shouts">Shout Outs!</a></li>
<li><a href="comments">Comments</a></li>
</ul>
<img class="tclef" src="images/Tclef.png">
</div>
</div>
<div class="bpic">
<img class="llight" src="images/lightningL.png">
</div>
</body>
</html>
and now the CSS
body {
text-align: center;
padding: 0;
margin: 0;
}.rlight {
height: 80px;
padding-right: 20px;
}
.llight {
height: 80px;
}
.note {
height: 60px;
width: 55px;
padding: 0 0 0 45px;
}
.tclef{
height: 90px;
padding: 25px 0 0 12px;
}
#main{
margin: 0 auto;
width: 590px;
height: 416px;
}
div.lpic {
float: left;
}
div.vid {
float: left;
}
div.menu{
float: right;
text-align: left;
padding-top: 30px;
padding-right: 20px;
}
div.menu ul {
display: inline;
list-style-type: none;
padding: 10px 0 0 0;
margin: 0;
}
div.bpic {
width: 100%;
}
The problem was the div #main was showing a height of only 65px (I had to add the height of 416px) yet it contained the div.vid which was 450px in height. I thought the parent div would set the height automatically to fit all objects inside. This was not the case. Because of this, the div.bpic top was 65px from the top of the browser window and appeared to the bottom right of the video window and below the div.menu object instead of below the video window (where I expected it to).
Can someone explain why this happened? Did it have something to do with the content of the divs within the div #main? Like I said, I have fixed the problem, I would just like to know why I had to insert the height declaration.
The problem was the div #main was showing a height of only 65px (I had to add the height of 416px) yet it contained the div.vid which was 450px in height. I thought the parent div would set the height automatically to fit all objects inside.
Easiest fix is "clearfix" or adding something in the parent after the floated element that has the right "clear" property and is not floated itself.
