can get rid of margin collapse [Archive]

alexmel7

Feb 26th, 2009, 06:38 PM

I have a float in my header that seems to cause a margin collapse (adds extra space below) in FF when I try to clear it. I have a nave menu (list style) in the div below it, which I have tried zeroing out the margins for, but it does not seem to help. Code is below. Any suggestions?

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>

<div id="wrapper">

<div id="header">

<div id="bannerbox">

<a href="#"><img class="banner" src="images/banner.jpg" alt="OPEN HOUSE MARCH 19 2009" /></a>

<p>JOIN US FOR OUR ANNUAL COMMUNITY</p>
<p>OPEN HOUSE MARCH 19 2009</p>
<p>click here for details</p>

</div>

<img class="logo" src="images/logo.gif" alt="TST BOCES Career & Tech Center" />

</div> <br class="clearfloat" />

<div id="nav1">
<ul>
<li><a href="#">ABOUT C&T</a></li>
<li><a href="#">HOW TO ENROLL</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">C&T EDUCATION</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>

</div>

<div id="nav2"></div>
<div id="boxfloatright">

<div id="welcome">

<img class="welcomeheader" src="images/welcome.gif" alt="" />

<p>Career & Tech students come from all the area high schools in Tompkins, Tioga and Seneca counties, and attend classes for the entire school year.</p>
<p>
Career & Technical Education complements a high school schedule while allowing students to find personal success in their academics.</p>
<p>
The Career & Tech Center is committed to "closing the achievement gap" by offering alternatives to traditional teaching.</p>

</div>

</div>

<div id="maincontent">

<img class="learning" src="images/learning.gif" alt="" />

</div>

</div>

</body>
</html>

CSS:

body {
background-color: #000000;
}

#wrapper {
width: 934px;
margin: 0 auto;
background-color: #000000;
}

#header {
width: 934px;
height: 160px;
background-color: #000000;
}

#bannerbox {
width: 540px;
height: 61px;
float: right;
margin: 60px 0;
}

#bannerbox a img {
vertical-align: middle;
text-decoration: none;
outline: none;
border: none;
}

#bannerbox a:Focus {
outline: none;
}

#bannerbox p {
display: none;
}

#nav1 {
background-image: url(images/nav1bg.jpg);
width: 934px;
height: 27px;
background-color: #5c5c5c;
}

#nav1 ul {
list-style: none;
margin: 0 0 0 100px;
padding: 3px 0 0 0;
border: none;
}

#nav1 li {
text-decoration: none;
margin: 0 0 0 5px;
display: inline;
padding: 0;
}

#nav1 a:Link, a:Active, a:Visited {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #CCCCCC;
letter-spacing: 2px;
}

#nav1 a:Hover {
color: #5D95C1;
}

#nav1 a:Focus {
outline: none;
}

#nav2 {
background-image: url(images/nav2bg.jpg);
width: 934px;
height: 32px;
background-color: #FFFFFF;
}

#boxfloatright {
width: 319px;
height: 340px;
background-color: #a3a3a3;
float: right;
margin: 0 40px 0 0;
}

#welcome {
width: 304px;
height: 284px;
background-color: #FFFFFF;
margin-top: 25px;
}

#welcome p {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 13px;
padding: 0 10px;
line-height: 17px;
margin-top: 8px;
}

#maincontent {
width: 575px;
height: 340px;
background-color: #a3a3a3;
}

img.logo {
padding: 35px 0 0 95px;
}

.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 a float */
clear: both;
height: 0;
font-size: 0;
line-height: 0px;
}

Excavator

Feb 26th, 2009, 07:53 PM

Hello alexmel7,
To see any problems caused by your floated images we will at least need to know their sizes. A test site would be better...

I'm assuming banner.jpg is 540px X 61px because #bannerbox is that size.
What size is your logo.gif?

Try building your header like this:
<div id="header">
<a href="#" class="banner"><img src="images/banner.jpg" width="540" height="61" alt="OPEN HOUSE MARCH 19 2009" />
<p>JOIN US FOR OUR ANNUAL COMMUNITY</p>
<p>OPEN HOUSE MARCH 19 2009</p>
<p>click here for details</p>
</a>
<img class="logo" src="images/logo.gif" alt="TST BOCES Career " Tech Center" />
</div>
See where we get the size of banner.jpg now?
Try this CSS along with that
body {
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width: 934px;
margin: 0 auto;
background: #000;
}
#header {
width: 934px;
height: 160px;
background: #CC9;
}
.banner {
float: right;
margin: 60px 0;
}
.banner a:Focus {
outline: none;
}
.banner p {
display: none;
}

Excavator

Feb 26th, 2009, 08:03 PM

Or this for the whole thing:
<!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>Untitled Document</title>
<style type="text/css">
body {
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width: 934px;
margin: 0 auto;
background: #000;
overflow: auto;
}
#header {
width: 934px;
height: 160px;
background: #CC9;
}
.banner {
float: right;
margin: 60px 0;
}
.banner a:Focus {
outline: none;
}
.banner p {
display: none;
}
ul#nav1 {
background: #5c5c5c url(images/nav1bg.jpg);
width: 834px;
height: 27px;
float: left;
list-style: none;
padding: 0 0 0 100px;
}
ul#nav1 li {
display: inline;
}
ul#nav1 li a:link,
ul#nav1 li a:visited,
ul#nav1 li a:active {
float: left;
display: block;
padding: 7px 10px;
text-decoration: none;
color: #CCCCCC;
letter-spacing: 2px;
font: bold 11px Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
}
ul#nav1 li a:hover {
color: #5D95C1;
}
#nav1 a:Focus {
outline: none;
}
#nav2 {
background: #fff url(images/nav2bg.jpg);
width: 934px;
height: 32px;
clear: both;
}
#boxfloatright {
width: 319px;
height: 340px;
background: #a3a3a3;
float: right;
margin: 0 40px 0 0;
}
#welcome {
width: 304px;
height: 284px;
background: #FFFFFF;
margin-top: 25px;
}
#welcome p {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 13px;
padding: 0 10px;
line-height: 17px;
margin-top: 8px;
}
#maincontent {
width: 575px;
height: 340px;
background: #663;
}
img.logo {
padding: 35px 0 0 95px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="#" class="banner"><img src="images/banner.jpg" width="540" height="61" alt="OPEN HOUSE MARCH 19 2009" />
<br />JOIN US FOR OUR ANNUAL COMMUNITY
<br />OPEN HOUSE MARCH 19 2009
<br />click here for details
</a>
<img class="logo" src="images/logo.gif" alt="TST BOCES Career " Tech Center" />
</div>
<ul id="nav1">
<li><a href="#">ABOUT C"T</a></li>
<li><a href="#">HOW TO ENROLL</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">C"T EDUCATION</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div id="nav2"></div>
<div id="boxfloatright">
<div id="welcome">
<img class="welcomeheader" src="images/welcome.gif" alt="" />
<p>
Career " Tech students come from all the area high schools in Tompkins,
Tioga and Seneca counties, and attend classes for the entire school year.
</p>
<p>
Career " Technical Education complements a high school schedule while
allowing students to find personal success in their academics.
</p>
<p>
The Career " Tech Center is committed to "closing the achievement
gap" by offering alternatives to traditional teaching.
</p>
</div>
</div>
<div id="maincontent">
<img class="learning" src="images/learning.gif" alt="" />
</div>
</div>
</body>
</html>

alexmel7

Feb 26th, 2009, 09:05 PM

I took out the div banner and made the whole thing a class like you demonstrated. Then I added overflow:hidden to the container div (#header) and it seems to have solved the problem.