HTML Forum

**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!

**MJM_RDS** · 03-27-2007, 12:29 PM

You should be able to use "width: auto;" or "width: 100%;" or just don't define the width.
I use a semi-liquid two column layout with negative margins. I say semi-liquid because I have a min- and max-width defined and it adjusts too window size as well as text size.
My container that holds the columns has a min- and max-width which is defined by "real size - float size". Why? Because I'm using negative margins to push the float and I have a border/margin set to the size of the float on the resizing div.

Hope that makes sense...

Here's the example not liquid:

Code:

#container {
width: 580px;
padding-left: 200px;
background-color: #FFF;
overflow: hidden;
}
/* IE fix */
* html #container {
height: 1%;
}
#leftcolumn {
float: left;
width: 200px;
background-color: #000;
margin-left: -200px;
display: inline;
}
rightcolumn {
float: right;
width: auto;
background-color: 200px;
border-left: 200px solid #000;
margin-left: -200px;
}

I think ALA had an article on this not too long ago? Been using this for a while though

**MJM_RDS** · 03-27-2007, 03:27 PM

A small update and this is something I only noticed now, there are issues with not specifying a width or assigning it the value of auto if the background colours are different. Contents won't overlap, but the background colours may, depending on the size of the two columns.

**Noiseky** · 11-07-2011, 11:02 AM

Here's mine:

/*=Floating Elements—————————————————————*/
#alertBlock {
z-index:1000;
position: fixed;
width: 70%;
background-color: #000000;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
top: 0;
text-align: center;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

I've changed the 100% width to 70 and it works now in Firefox. Before it won't show in Firefox.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!