CSS - Clear Float In Firefox 1.0x

Hey all, up until recently I have used the various styles and hacks using :after or clear:both; to rectify and force divs to clear. However knowing that these methods won't validate and aren't strictly proper, I've decided to ditch all those methods and try to sort floated divs out correctly.

Here is the culprit;
Code:

<div style="height:144px; margin-bottom:10px;">
								
	<div style="height:110px; padding:0px 0px 5px 0px;">
		<div style="width:80px; height:110px; float:left;">
			<div><!-- DYNAMIC IMAGE --></div>
		</div>
	
		<div style="width:655px; height:110px; float:left;">
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC DESCRIPTION --></div>
		</div>
	</div>
	
	<div style="height:29px; background-color:#D8D8D8;">
		<div style="padding:7px 0px 0px 10px; margin:0px 5px 0px 0px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:7px 0px 0px 10px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:3px; float:right;"><!-- DYNAMIC TEXT --></div>
	</div>
	
</div>

The problem is with the contents of <!-- DYNAMIC DESCRIPTION -->. This is user entered through a HTML editor in their admin console. This can have line breaks etc. and therein is where my problem lies.

I have restricted the showing of the "Description" text to 175 chars. Meaning, and providing the user enters more than 175 chars before a line break, it would rarely go on to a new line when displayed in the above page. However if a user added multiple line breaks the content would still display overlaying the bottom, and final div.

Now I understand I could remove line breaks etc before rendering, but I would like not to have to do that, I would rather the "Description" div stretch to accomodate the text however it presents itself than run the risk of one day having "leaking" overlaying content.

I tried the width:100%; overflow:auto; but this results in scrollbars. I don't want to use hidden either because again it rendered badly.

I've also used clear:both; on the final div with no joy.

Is there anything that can be done? I'm sure there is, maybe I just can't see the wood for the trees at the moment.

Any suggestions would be hugely appreciated. Thanks in advance.

My skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice.

Anyone have any pointers or tutorials that you think might be worth checking out?

TIA.

Scenario:::
So I got < div > or < p > with < img > inside. < img > that has < float:left >, so that text nicely warps around the < img > along its right side. I also got my < p > with < border:1px solid #CC33CC >, as I have lets say five words within < p >, now my < p > element and its border wraps around text and does not take < img > into consideration and it will seem fine as normal flow has been broken as explained by CSS standard, but I want to make sure that this border of my < p > or < div > element warps around the < img > as well, so we fix it with < div > that has < clear:both > and style, just an empty element.

Question:::
I would like to illuminate insertion of empty element with < clear:both >, although it makes perfect sense to insert such styled empty element to fix the flow so that it will wrap the < img > as well. But I wonder if there is another method available.
It just feels redundant.

Hi gyus!

I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed.

All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned)

I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server)

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" []>

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
 		<title>Testing</title>
  		<link rel="stylesheet" type="text/css" href="test.css"/>
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8;"/>
	</head>
 	<body>
 		<form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8">
			<div>
			<label for="audio_level">Audio Level:</label>
			<input type="text" id="audio_level" value="0"/>
			<label for="audio_level1">Audio Level:</label>
			<input type="text" id="audio_level1" value="0"/>
			<label for="audio_level2">Audio Level:</label>
			<input type="text" id="audio_level2" value="0"/>
			<label for="audio_level3">Audio Level:</label>
			<input type="text" id="audio_level3" value="0"/>
			</div>
			</form>
	</body>
</html>

And the CSS:
Code:

body {
	width:800px;
}
label {
	display:block;
	float:left;
	clear:left;	
	width:100px;
	text-align:left;
}
input {
	display:block;
	float:left;
	width:100px;
}

Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary?

I can't figure out what I am missing to get the one label/input per "line"

...I am having a problem with images, they display correctly in mozilla firefox (i.e above the text) but incorrectly in internet explorer.
I think it may be due to the float and/or clear functions or maybe the z-index function. here is the htm file... http://www.ajc.kwmaher.com/teebs/...and here is the css file http://www.ajc.kwmaher.com/teebs/style.css . Help appreciated.
Teeb(s)

Hello,

I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div.

I have tried a couple of things, here is the page I'm working on and this is the css file

This hasn't been tested on Windows, so I have no idea how it looks.
It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack.

The current setup of the page is this:

HTML: Code:

<div id="content">
	<div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div>
	
	<div class="image1">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis 
		parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div class="image2">
		<img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede 
		diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p>
	</div>
		
	<div class="another3">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient 
		montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla 
		consectetuer.</p>
	</div>

CSS: Code:

img.left {
	float: left;
	border: solid 1px black;
	padding: 10px;
	margin-right:10px;
	margin: bottom: 10px;
}

img.right {
	float: right;
	border: solid 1px black;
	padding: 10px;
	margin-left:10px;
}

.image1 {
	border: red 1px solid;
	padding : 0px;
}
.image2 {
	border: orange 1px solid;
	padding : 0px;
}
.image3 {
	border: blue 1px solid;
	padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.another {display: inline-table;}

/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */

/* .clearer {
	clear: both;
} */

p.red {
	color: red;
}
p.orange {
	color: orange;
}
p.blue {
	color: blue;
}

Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either.

Is there a solution?

In a nutshell, I want the following page:

http://kznf.com/test/example.html

to display in IE7 how it does in FF3 and Safari 3.1

The only "solution" I've been able to come up with is to enforce a width on some wrapping div. The problem is that sometimes I want it to have a wider width, as seen in example2

http://kznf.com/test/example2.html

Am I doing something wrong? Is there some ridiculous IE7 only solution out there somewhere? I've googled and searched forums and I'm about to give up and go back to table based layout! Someone help!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">
		
		.floatleft1
		{
			width: 100px;
			height: 100px;
			background-color: green;
			border: 1px solid #000;
			
			float: left;
			clear: left;
		}
		.floatleft2
		{
			width: 100px;
			height: 100px;
			background-color: red;
			border: 1px solid #000;
			
			float: left;
			
		}	

		.previousLine 
		{
			float:left;
			clear:none;
		}

</style>
</head>
<body>

<div class="floatleft1">apple</div>
<div class="floatleft2">red</div>
<div class="floatleft1">banana</div>
<div class="floatleft2">yellow</div>
<div class="floatleft1 previousLine">really?</div>
<div class="floatleft2">yes</div>
<div class="floatleft1">plum</div>
<div class="floatleft2">purple</div>


</body>
</html>

Hi all,
I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings.
I've found 2 good solution:
1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu.
2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading.

Similar problem is being solved in this thread, but I didn't found there anything working .

Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css.

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

Hey guys...I'm having a problem with the clear property in firefox adding a large space between a float element and the element that is being cleared. The code is below:

HTML Code:

Code:

<body>
<div id="header">
	<div id="topAd">
		Top ad - Premium Placement
	</div>
	<div id="logobox"> 
		<div id="sitestats"> 
		  Stat 1: stat<br />
		  Stat 2: stat<br />
		  stat 3: stat
		</div>
		<img src="images/logo.gif" alt="Logo Image"/> 
		<div id="topnav">
          this is the top navigation
		</div>
	</div>
</div>
</body>

and the CSS Code:

Code:

body,form,ul,li {
	margin: 0px;
	padding: 0px;
	font-size: 9pt;
	font-family: helvitica,arial;
	color: #333;
}

#header {
	display: block;
	border: 1px solid orange;
}
#topAd {
	display: block;
	background-color: #333;
	color: #FFF;
	text-align: center;
}
#logobox {
	display: block;
	vertical-align: bottom;
	border: 1px solid green;
	height: auto;
}
#sitestats {
	float: right;
	font-size: 8.5pt;
	border: 1px solid yellow;
	height: auto;
}
#topnav {
	clear: both;
	background-color: #333;
	color: #FFF;
	text-align: right;
	padding-right: 0.2em;
}

Now this code works fine in IE, but in Firefox, the cleared element seems to get a very large space between the float and the cleared element. Any help would be appreciated.

i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;")

in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line

in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc

any thoughts or anything that could help would be apprciated...

regards

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!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" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

I seem to have an issue with the float parameter in Firefox.

If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me..

http://www.arestaenterprise.com/enf/

Any help is appreciated

Thanks!

I am having an issue with a div that I am trying to float and set the width of. The page works fine in Firefox, but in IE it doesn't display correctly,

Here is the pertinent code,

<div id="textbar" class="sidebar" style="width:175px;">
<div id="handle">
<a href="#"><img src="http://swvtc06/swvtc/images/collapse.jpg" border="0" alt="Click to Collapse the Navigation Bar" onclick="sidebar()" /></a>
</div>
<div id="sbText" style="display:block;">
<!--#include virtual="/swvtc/include/nav_test.htm" -->
<!--#include virtual="/swvtc/include/smweather.asp" -->
</div>
</div>

Here is the CSS for the #handle div,

#handle {
float:right;
width:9px;
}

In Firefox, the handle div is correctly inline with the background graphic. In IE, the handle div is about 9 pixels to the left of where it should be.

We are in the ancient times, we still are mandated to be using IE 6, so that is where I am having the problems.

Where am I going wrong?

Thanks,
Drew