Struggling to create a simple vertical layout without any unwanted whitespace? Look no further! Every time I add content to one of the divs, it ends up creating unnecessary space between them.
Take a look at this visual example:
Let's dive into my HTML code:
<body>
<div id="container">
<div id="header">
<p> </p>
</div>
<div id="chat">
<p>.</p>
</div>
<div id="footer">
<p>.</p>
</div>
</div>
</body>
And now, here is how I styled it using CSS:
body {
background-color:#777;
font-family:Verdana, Geneva, sans-serif;
}
#container {
width:100%;
}
#header {
text-align:center;
background-color:#000;
color:#FFF;
}
#chat {
background-color:#EEE;
}
#footer {
background-color:#000;
}
If you're wondering how to prevent that pesky whitespace from showing up automatically, I'm right there with you!
Best, Chris