Forum Moderators: not2easy
Now if a height declaration is declared in "content", the vertical gap disappears, but now has a 3px gaps on left and right. If the "title_line" is removed entirely in the html section, it works.
I would like to have the title line, and still have everything line up correctly. I've lost a lot of time on this and would greatly appreciate any help.
Thanks
<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>3 column layout has gap, either on top, or 3px on sides</title>
<style type="text/css">
body{
font: 100% Arial, Helvetica, sans-serif;
background-color: yellow;
font-size: large;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
margin: 0;
}
#title_line {
width: 100%;
float: left;
background-color: #000;
color: #0f0;
text-align: center;
margin-bottom: 0;
}
#container {
margin: 0 auto;
text-align: left;
width: 85%;
}
.leftblock {
width: 200px;
background-color: #f00;
float: left;
display: inline-block;
}
.rightblock {
width: 400px;
background-color: #00f;
float: right;
display: inline-block;
}
.content {
margin-top: 0px;
margin-left: 200px;
margin-right: 400px;
padding: 0;
background: aqua;
color: #000;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final
element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="title_line">
<h1>Sitename</h1>
</div>
<div class="leftblock">
<p>The sun deserted Arnette; the town grew dark under the wing of the night. The town was,
except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind
chimes, silent. And silent. And silent. </p>
</div>
<div class="rightblock">
<p>The sun deserted Arnette; the town grew dark under the wing of the night. The town was,
except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind
chimes, silent. And silent. And silent. </p>
</div>
<div class="content">
<p>The sun deserted Arnette; the town grew dark under the wing of the night. The town was,
except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind
chimes, silent. And silent. And silent. </p>
</div>
<br class="clearfloat" />
</div>
<br class="clearfloat" />
</body>
</html>
</code>
2) As to the problem and question. IE6 is giving the <p> within <div class="content"> margin. I added an inline declaration taking the margin to 0 and the problem went away. Still looks fine in current FF and some version or Opera (don't recall which). You will want to test further of course.
<!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>3 column layout has gap, either on top, or 3px on sides</title>
<style type="text/css">body{
font: 100% Arial, Helvetica, sans-serif;
background-color: yellow;
font-size: large;
margin: 0;
padding: 0;
text-align: center;
}h1 {
margin: 0;
}#title_line {
width: 100%;
float: left;
background-color: #000;
color: #0f0;
text-align: center;
margin-bottom: 0;
}#container {
margin: 0 auto;
text-align: left;
width: 85%;
}.leftblock {
width: 200px;
background-color: #f00;
float: left;
/*display: inline-block;*/
}.rightblock {
width: 400px;
background-color: #00f;
float: right;
/*display: inline-block;*/
}.content {
margin-top: 0px;
margin-left: 200px;
margin-right: 400px;
padding: 0;
background: aqua;
color: #000;
}.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="title_line">
<h1>H1 in title_line</h1>
</div>
<div class="leftblock">
<p>The sun deserted Arnette; the town grew dark under the wing of the night. The town was, except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind chimes, silent. And silent. And silent. </p>
</div>
<div class="rightblock">
<p>The sun deserted Arnette; the town grew dark under the wing of the night. The town was, except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind chimes, silent. And silent. And
silent. </p>
</div>
<div class="content">
<!--Our problem <div>?-->
<p style="margin: 0;">The sun deserted Arnette; the town grew dark under the wing of the night. The town was, except for the chirr and whisper of small amimals and the tinkle of Tony Leominster's wind chimes, silent. And silent. And silent. </p>
</div>
<br class="clearfloat" />
</div>
<br class="clearfloat" />
<!--#####
This is a code from a website on 3 column, and is a Fixed-Elastic-Fixed. In the website that gave the example there wasn't a title line, and when one is added (title_line) the middle block ("content" in light blue) drops down slightly.Now if a height declaration is declared in "content", the vertical gap disappears, but now has a 3px gaps on left and right. If the "title_line" is removed entirely in the html section, it works.
I would like to have the title line, and still have everything line up correctly. I've lost a lot of time on this and would greatly appreciate any help.
-->
</body>
</html>
