CSS Float Problems

**pjb007** · 07-25-2006, 11:49 AM

I have been having problems with floating elements in CSS. It all works 100% perfect in IE, but in FireFox, it won't

Here is the code can anyone offer an answer.

Oh the colour scheme is only temporary its so I can see each element clearly on screen.

CSS

Code:

/* CSS Document */

.banner {
	background-color:#0000FF;
}

.space {
	background-color:#0000FF;
	clear:both;
}

.menu {
	background-color:#FF0000;
	clear:both;
}

.pic {
	background-image:url(/images/pic.jpg);
	background-repeat:no-repeat;
	float:left;
	height: 300px;
	width: 300px;
}

.caption {
	background-color:#00FFFF;
	height:inherit;
	width:inherit;	
}

.main {
	background-color:#FFFF66;
	float:left;
}



.title {
	font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:2em;
}



.title2 {
	font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:0.5em;
}

.links {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:1em;
}

h1{
	font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
	font-size:2em;
	color:#CC0000;
	padding-top: 10px;
	padding-right: 100pt;
	padding-bottom: 0;
	padding-left: 20pt;
}

p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.9em;
	padding-top: 10px;
	padding-right: 50pt;
	padding-bottom: 0;
	padding-left: 20pt;
}

.captiontext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	padding:5px 0px 0px 5px;
}

(X)HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<title>Untitled Document</title>
</head>

<body>
<div class="banner">
	<div class="title">
	WELCOME| <span class="title2">random text </span></div>
</div>

<div class="menu">
	<div class="links">
		LINK1 :: LINK2 :: LINK3 :: LINK4 :: LINK5 :: LINK6
	</div>
</div>



<div class="pic"><img src="images/pic.jpg" width="300" height="300" alt="pic" />
  		<div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
	</div>

<div class="main">
	
	<h1>
		RANDOM TEXT 
	</h1> 
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</body>
</html>

**RNPoo7** · 07-25-2006, 11:54 AM

Can you post a link to the site?

**pjb007** · 07-25-2006, 12:03 PM

Temporally the page is at
http://www.peterbond.me.uk/newlooksite/

**vangogh** · 07-25-2006, 03:20 PM

Looks like in Firefox #main is being forced to 100% of the width. When I set the width to about 70% on #main it jumped into place in Firefox. There's probably a better way to make it work, but adding a width seemed to at least.

**pjb007** · 07-25-2006, 03:40 PM

Thanks, I think its the picture thats 300px that is causing the problem.

I'll made that main text area background white that way its not too noticeable

**vangogh** · 07-25-2006, 03:43 PM

Seems to be working now.

**LadynRed** · 07-26-2006, 02:10 PM

If you are going to float a box like that, you MUST give it a defined width. IE's box model and float execution are a mess. FF was actually doing it correctly.

**digibluez** · 07-26-2006, 02:21 PM

Add

PHP Code:


			
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) { echo'We do not tolerate IE here,leave or download firefox.Thank you!'} else {?>
//your content here
<?php
}
?>

and you will never have to worry about IE again

**LadynRed** · 07-26-2006, 02:37 PM

What would be the purpose of that ?? Better to LEARN CSS the right way than to learn hacks to avoid it.

**vangogh** · 07-26-2006, 07:39 PM

It really isn't hard to learn cross browser css. Once you learn why things look different it becomes pretty easy to get your sites looking good without having to resort to browser hacks.

**pjb007** · 07-27-2006, 09:33 AM

Are the last 2 comments aimed at me or digibluez.

The Width is defined so now its working.

Out of interest rather than defining the width numerically is there a way (in the CSS) to say use remaining space.

**vangogh** · 07-27-2006, 05:36 PM

My last comment was just meant to be general for anyone reading.

You can specify widths in terms of px or other exact units like pt, though px are the better option online. You can also specify widths in things like % or em, which will be a more fluid measurement based on the width of the browser window at the moment or the font size being used.

I'm not sure you can specify whatever happens to be left, though depending on the way the page is structured the default width will sometimes be whatever remaining space is left in this container.

**LadynRed** · 07-27-2006, 06:58 PM

Yes, that's about the size of it. If I'm doing a 2-column layout I will usually define the left column width, set it to float:left then define the right column space using a left margin wide enough to push it past the floated left column. I don't have to define a width and the right box will use all the remaining space within the margins that I've set.

**grebo** · 03-24-2007, 11:25 PM

I can't beleive it. I struggled with this problem for 2 days getting myself deeper in a mess. 2 mins after reading this I'm sorted. Thanks

**LadynRed** · 03-24-2007, 11:36 PM

Excellent !!

**vangogh** · 03-26-2007, 09:04 PM

Good to hear Mike.

**universal** · 03-27-2007, 09:14 AM

Great topic!