This should only take a second for a clever person but can somebody
please explain why there is a gap at the top of this layout. You'll see
what I mean when you view it.
Also, could you please explain why the gap disappears when :
a) I give the div#main a border
b) give the div#main some content prior to it's first <p>, eg: <div
id="main">test content
<p>Lor..etc..
Here's the page :
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple 2 column layout with footer</title>
<style type="text/css">
body
{
font-family: georgia;
margin:0;
}
h1
{
margin:0;padding:0;
}
div#header
{
margin:0;
background-color:#bff;
}
div#main
{
margin:0;
background-color:#b3f;
}
div#menu
{
margin:0;
width: 15%;
float: left;
background-color:#ebf;
}
div#footer
{
clear: both;
background-color:#ffb;
}
</style>
</head>
<body>
<div id="header">
<h1>The header</h1>
</div>
<div id="menu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem.
Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem,
laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien
tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis
tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a,
lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.</p>
</div>
<div id="main">
test
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem.
Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem,
laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien
tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis
tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a,
lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.</p>
<p>Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus
eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non,
posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero.
Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit.
Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim.
Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate
dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero.
Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam
eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum,
vestibulum ut, interdum at, aliquam vel, felis.</p>
<p>Praesent imperdiet volutpat enim. Donec eget lectus. Morbi ornare
dui vel eros. Morbi sit amet magna. Proin a tortor et mi iaculis
cursus. Vivamus iaculis felis in justo. Donec dolor dolor, mollis et,
sodales eget, vestibulum id, sapien. Proin fringilla risus ut lorem.
Phasellus quis leo et sem tincidunt ultricies. Etiam dui lorem, gravida
ac, volutpat at, mollis eu, wisi. Nam iaculis cursus arcu. Donec
cursus, sem quis pulvinar bibendum, est leo sodales felis, sed laoreet
lectus nibh at lacus. Sed erat. Aenean volutpat lacus sit amet pede.
Duis nibh dui, tempor in, dictum non, ornare ac, ante. Nulla semper
eros in justo. Nulla vel mauris.</p>
<p>Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis
ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet,
iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a,
tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam
scelerisque consectetuer magna. Nam interdum risus non tortor. Donec
eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum
elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare
lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod.
Praesent nec purus. Mauris eget magna.</p>
<p>Nullam vehicula, augue id imperdiet iaculis, tellus neque commodo
felis, ac aliquet risus nibh id nibh. Curabitur id odio non diam
pretium luctus. Curabitur volutpat libero vel dolor. Ut imperdiet quam
vel massa. Maecenas aliquam, diam nec dignissim accumsan, mauris mi
venenatis turpis, consequat vestibulum enim lorem quis nibh. Integer
bibendum pretium purus. Quisque ante. Nulla sed arcu. Etiam vel arcu.
Nunc varius. Maecenas elementum lacus sit amet arcu. Curabitur sagittis
gravida ipsum. Donec ac turpis. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam
commodo diam. Duis viverra fermentum purus. Maecenas congue, sem non
luctus ultrices, diam wisi porta diam, in varius dolor nulla id ante.
Aliquam convallis volutpat nibh.</p>
</div>
<div id="footer">
The footer...
</div>
</body>
</html>