CSS - Float / Clear Issue With Ie - Please Help!

I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start.

Any ideas plase?

Code:

<div id="container">
  
    <div id="home_col_1">
        <img src="images/holder_slideshow.png" alt="" width="446" height="365" />
        <div id="home_col_1_1">
            column 1<br />
            column 1<br />
            column 1<br />
            column 1<br />
            column 1
      </div>
        <div id="home_col_1_2">
            <p> column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            
      </div>
    </div>
    
  <div id="home_col_2">
    <p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
  </div>
    
  <div id="home_quicksearch">
        Search Box Here
  </div>
    
    <div id="home_col_3">
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
  </div>
    
  <div id="home_col_4">
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
  </div> 
  
<div class="clear_floats"></div>     
</div>

Code:

#container				{	width: 986px; margin:0 auto; }

#home_col_1				{	width:446px; height:365px; float:left;	 }
#home_col_1_1			{	width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px;	 }
#home_col_1_2			{	width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px;		 }
#home_col_2				{	width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3				{	width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4				{	width:142px; float:left; padding:0 10px; }

#home_quicksearch		{ 	width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px; 					
							background-color:#FFFFFF; }



#footer 				{ width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }

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"

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.

...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)

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.

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.

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?

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.

Hello,

Consider the following design:

<div id="container">
<div id="A" class="A"></div>
<div id="B" class="B"></div>
</div>

And the CSS classes:
.A {float:left; clear:left}
.B {float:left; clear:right}

This does not work well. So I always do as follow:

<div id="container">
<div id="A" class="A"></div>
<div id="B" class="B"></div>
<div id="clear" class="clear"></div>
</div>

Whe
.A {clear:both}

This always happens when I have divs inside other divs.
Does anyone knows how to solve this?

Thanks,
Miguel

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;


 } 

Hi Guys,

Ive got a serious'ish error on a site im responsible for and with it being the period between christmas and new years I cant find anyone to help me.

So im coming asking for help with an IE6 error which is occuring on http://social.eyeforpharma.com/

It appears fine in every browser apart from IE6. IE7, FF, Safari etc work fine.

With no decent debug tools for IE6 available im stuck.

Help REALLY appreciated.

Kevin.

Edit - The error gets worse when you go to view an article.

heys all, im having an issue with text that is variable length.

i want to float something in the bottom right corner of some text. that something which is floated should have a width of 100px and height of 100px.

so for example

text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text FLOATED HERE
text text text text text text text text text FLOATED HERE
text text text text text text text text text FLOATED HERE

now the sample text above can be 1 line, or 100 lines. anyone have any ideas? i've been hammering away at this too long

Thanks.

Having one last problem before the site goes beta live...

I have rounded divs, and inside is a floated left menu element. If something in the menu expands the round corners pop out of place rather then shift down. Im not sure what to chage.

The site is: adventurevalley.ca/jason/programs/prgSwim.cfm

If you mouse over the birthday parties link you will see what I mean (IE7 issue).

Thanks a mill!

hello. i am making a small, rough bar graph on the left side of my page. when i try it, the bar ends up going to a new line. what i'd like to do is have a colored div fill up 80% or 100% of the rest of the space to the right of the key.

here is the code:

Code:

<div class="bar_graph">
	<div class="key">signed: 8,000</div>
	<div class="bar signed" style="width: 80%">&nbsp;</div>
</div>

...

.signatures {
	margin-top: 20px;
}

.signatures .bar_graph {
	overflow: auto;
	margin-top: 2px;
}

.signatures .key {
	float: left;
	font-size: 8px;
	text-align: right;
	width: 40px;
}

.signatures .bar {
	float: left;
	height: 17px;
}

.signatures .signed {
	background: #f3b400;
}

.signatures .goal {
	width: 100%;
	background: #e58728;
}

Hello

i would like to know if there is any hacks or tips to resolve problem in IE6's rendering of Floated Boxes? It seems IE6 add extra padding or margin to some floated element, specially those near the borders of container... How do i get around this?