Forum Moderators: not2easy
By the way, if "#wrapper" is omitted, problem goes away, but was hoping to use wrapper to globally setup the margins in the browser window. (maybe there's another way?)
Anyone know a fix that will eliminate the column gap and provide for margins around the whole structure?
==================== BEGIN CSS ====================
/*** 2-column liquid CSS layout using floats ***/
/*** BEGIN CSS ***/
/*** HTML tag styles ***/
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height: 140%;
margin: 0px;
padding: 0px;
background-color: #66517B; /* */
font-size: 76%;
}
h1 {
font-size: 200%;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
/*** Format Classes ***/
.subhead {
margin:0px; /* For first element in column, set top margin to zero to fix IE 5/6, Opera 7 rendering error. Without fix, vertical alignment of content elements may not line up column to column */
font-weight: bold;
color: #000000;
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}
/*** Layout Divs ***/
#wrapper{
margin: 10%;}
#masthead{
padding: 2%;
background-color: #3399CC;
margin: 0px;
}
#left-column{
padding: 2%;
width:20%;
float: left;
margin: 0px;
background-color: #FFBEA8;
}
#center-column{
padding: 2%;
margin-left: 24%;
background-color: #D2D2FF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/* Clearing the footer (clear:both;), expands the footer to full width
and places it immediately under the longest column. */
#footer{
clear: both;
font-size: 100%;
color: #000000;
padding: 2%;
background-color: #77BCDD;
text-align: center;
}
#footer img{
padding: 0px;
}
/*** END CSS ***/
==================== END CSS ====================
==================== BEGIN HTML ====================
<!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 name="generator" content="HTML Tidy, see www.w3.org"; />
<title>3-Column CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="2-column.3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- start masthead -->
<div id="masthead">
<h1>Masthead</h1>
<span class="subhead">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</span>
</div>
<!-- start left-column -->
<div id="left-column">
<p class="subhead">Column 1</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie.</p>
</div>
<div id="center-column">
<p class="subhead">Column 2</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. orem ipsum
dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed
aliquam sem ut arcu. Phasellus sollicitudin. Lorem ipsum dolor sit
amet, consorem ipsum dolor sit amet, consectetuer</p>
<p>Lorem ipsum dolor sit amet, consorem ipsum dolor sit amet,
consectetuer allus sollicitudin. orem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
</div>
<!-- start footer -->
<div id="footer">
<span class="subhead">Footer</span><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
</body>
</html>
==================== END HTML ====================
it's a mixture of inheritance and the box model.. but I bet you just want the cure ;)
Well unfortunately I want the cause!
it's a mixture of the box model (which I can't understand 'cos this doctype is strict, (quirks mode makes it worse!)) and inheritance, I think!.. or else if you've triggered yet another bug I'm gonna scream!
It's the 10% margins on the wrapper... move them to the body (an outer element) and all will be solved.. the only reason I'm telling you this is because I think there is something else going on here... anyone else care to test?
OK You Win.. 3 questions = 3 bugs.. ;) now give in would you.....lol
Suzy
