...

View Full Version : Floats & clears not working in Firefox.



bobgodwin
01-20-2008, 10:42 AM
Can't seem to get these floats & clears to work in Firefox. It looks fine in IE, but my right floats and divs won't clear in Firefox. Tried everything I could think of. Anybody out there have any ideas what I may be doing wrong?

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" type="text/css" href="cssTest.css" />

</head>
<body>
<div class="main">
<div class="top"></div>
<div class="mid">
<div class="left">
<div id="nav_left2">
<ul>
<li><a href="#">Voice</a></li>
<li><a href="#">Data</a></li>
<li><a href="#">Cabling</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
</ul>
</div><!-- End Nav_Left2-->
</div><!-- End Left -->
<div class="content">
<p>Right TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight </p>
</div><!-- End Content -->
</div><!-- End Mid -->
<div class="bot"></div>
</div><!-- End main -->
</body>
</html>
Here'd the css:

body {
margin:0;padding:0;
}

html {
margin:0;padding:0;
}

.main {
margin:0 auto;padding:0;width:90%;
}
.top {
width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgTopBlue2.jpg) no-repeat;
}
.left {
float:left;clear:right;margin:0;padding:0;width:200px;
}
.left p{
margin:0;padding:0;
}
.mid {
float:left;margin:0;padding:0;background:#fff url(images/bgMidBlue2.jpg) repeat-y;
}
.content {
float:right;clear:left;margin:0;padding:0;
}
.content p{
padding:0;margin:0;
}
.bot {
clear:both;width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgBotBlue2.jpg) no-repeat;
}

/* Nav */

#nav_left li a {
margin:0;padding:0;font-weight : bold;color : #fff;text-decoration : none;
}
#nav_left a:hover {
color : #003366;text-decoration : underline;margin:0;padding:0;
}
#nav_left ul {
list-style-type : none;line-height : 120%;font-size : 100%;color : #fff;margin : 0;padding : 0;
}
#nav_left ul a#now {
color : #003366;text-decoration : underline;margin:0;padding:0;
}
#nav_left {
margin : 0;padding :0;
}

/* Nav 2 */

#nav_left2 ul li a {
background : transparent url(images/dotUp.jpg) no-repeat left center;padding:0 0 0 12px;margin:0;text-align : left;font : bold 95% "trebuchet MS", arial, "Lucida Sans Unicode", verdana, lucida, sans-serif;text-decoration : none;color : #fff;
}
#nav_left2 ul li a:hover {
background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;margin:0;padding:0;
}
#nav_left2 ul li a#now {
background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;margin:0;padding:0;
}
#nav_left2 ul {
margin : 0;padding : 0;list-style-type : none;text-align : left;
}
#nav_left2 {
margin : 0;padding : 0;
}
And here's a link:
cssTest (http://www.randallgodwin.com/cssTest/)

Been tearing my hair out. Seems I should be able to get this working.

abduraooft
01-20-2008, 10:54 AM
You don't need to apply floats to both of your columns.
Give margin-left:200px; to content and remove float:right; clear:right;

bobgodwin
01-20-2008, 11:37 AM
Could of sworn I tried that. Thanks a bunch.

bobgodwin
01-20-2008, 11:59 AM
That works great, but I can't seem to get the content to drop to the bottom of the container. I moved the .top & .bot inside the .mid container, and while the content moved to the top, it won't go to the bottom. Tried floating .bot left, and clearing different ways but can't get it to drop. Not a real big deal, but it bugs me that I can't get it to work.

abduraooft
01-20-2008, 12:08 PM
Post your current code and state your intention.
Meanwhile have a look at some standard layouts at http://bonrouge.com/2c-hf-fluid.php

bobgodwin
01-20-2008, 08:56 PM
Sorry, here's the new html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" type="text/css" href="cssTest.css" />

</head>
<body>
<div class="main">
<div class="mid">
<div class="left">
<div class="top"></div>
<!-- Left Navigation-->
<div id="nav_left">
<ul id="navlist">
<li><a href="#h1">Welcome</a></li>
<li><a href="#h2">Mission</a></li>
<li><a href="#h3">History</a></li>
</ul>
</div>
<!-- End Left Navigation-->
<p>With over sixty years combined IP & network service.</p>
<div id="nav_left2">
<ul>
<li><a href="#">Voice</a></li>
<li><a href="#">Data</a></li>
<li><a href="#">Cabling</a></li>
<li><a href="#">Wireless</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
</ul>
</div><!-- End Nav_Left2-->
</div><!-- End Left -->
<div class="content">
<p>Right TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight </p>
</div><!-- End Content -->
<div class="bot"></div>
</div><!-- End Mid -->
</div><!-- End main -->
</body>
</html>
Here's the new css with background colors, paddings and margins added:

body {
margin:0;padding:0;background:#003366
}

html {
margin:0;padding:0;
}

.main {
margin:10px auto 0 auto;padding:0;width:90%;
}
.top {
width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgTopBlue2.jpg) no-repeat;
}
.left {
float:left;clear:right;margin:0;padding:0;width:200px;
}
.left p{
margin:0;padding:15px;
}
.mid {
float:left;margin:0;padding:0;background:#003366 url(images/bgMidBlue2.jpg) repeat-y;
}
.content {
margin-left:200px;padding:0;
}
.content p{
padding:20px;margin:35px 0 0 0;background:#fff;
}
.bot {
float:left;clear:right;width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgBotBlue2.jpg) no-repeat;
}

/* Nav */

#nav_left li a {
margin:0;padding:0;font-weight : bold;color : #fff;text-decoration : none;
}
#nav_left a:hover {
color : #003366;text-decoration : underline;margin:0;padding:0;
}
#nav_left ul {
list-style-type : none;line-height : 120%;font-size : 100%;color : #fff;margin : 0;padding : 0;
}
#nav_left ul a#now {
color : #003366;text-decoration : underline;margin:0;padding:0;
}
#nav_left {
margin:0 0 0 25px;padding :0;
}

/* Nav 2 */

#nav_left2 ul li a {
background : transparent url(images/dotUp.jpg) no-repeat left center;padding:0 0 0 12px;margin:0;text-align : left;font : bold 95% "trebuchet MS", arial, "Lucida Sans Unicode", verdana, lucida, sans-serif;text-decoration : none;color : #fff;
}
#nav_left2 ul li a:hover {
background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;
}
#nav_left2 ul li a#now {
background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;margin:0;padding:0;
}
#nav_left2 ul {
margin : 0;padding : 0;list-style-type : none;text-align : left;
}
#nav_left2 {
margin:0 0 0 25px;padding : 0;
}

And a link:

cssTest (http://randallgodwin.com/cssTest/)

I have trouble when I use a fixed size & width top and bottom background image with a scalable middle. I'd like content to fill the whole .mid section, going to the bottom of the .bot .div that contains the bottom background image. I've added a 35px margin to the top of .content p to get it to even out, then padded it out 20px. It looks good really. I'm probably just nit-picking to much. I'd just like a little less space top and bottom in the content.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum