Problem with CSS floating elements

Miscellaneous Forums/General Discussion/Problem with CSS floating elements

Hi,

I find it very difficult to use CSS floating elements and have any degree of precision. On our web site I have a <DIV> element for the main section of the page. Within this are a series of DIV's set to float:left and 50% width. As expected, they line up into two columns. But I then want to place another DIV underneath with a specific gap inbetween. I tried using clear: both but the top margin I set does not take into account the floating elements and so it does not seem to make a difference. If I put the floated DIV's into a parent DIV it won't expand properly. Does any body know of a way round this? Any help would be appreciated.

Thanks,

James

Game Boy

Have you tried putting the floating element inside a container element, in which the container element uses padding to position your content below your floating element? This always works for me.

FlameDuck

Stop using IE6?

Perturbatio

If you could post an example of your problem it might be easier to provide a solution.

JKP

Hi,

I'm using Firefox, Opera and Internet Explorer 7.0 and IE is actually the only one that renders it how I want it.

I'll see if I can find something that demonstrates the problem.

QuietBloke

floaters always give me jip.. and i also find ie actually does display things as I expect them to more often then the other browsers.

for example

<html>
<head>
</head>
<body>
	<div style="background-color:blue">
		<div>
			<div style="float:left;width=50%; background-color:red">left header</div>
			<div style="float:left;width=50%; background-color:green">right header</div>
		</div>
		<div style="background-color:yellow">main body</div>
	</div>
</body>

its a quick hack and the styling is embedded but from this quick test I would expect to see a red block in the left half, a green block in the right half and a full width yelow block underneath them.
Thats what ie shows.. but firefox shows all three blocks on 1 line.

Im sure its the way Im using the DIV's but I spent ages learning stylesheets using just ie and now I find my understanding is all wrong and I dont have any enthusiasm left to learn how it should be done.

JKP

Maybe the problem is just my understanding of CSS and I've done something stupid. Anyway, I've created a page to demonstrate what I mean:

http://www.inkandmedialtd.co.uk/misc/css.html
(The URL is from the company I work for)

Here is the code with inline styles:

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>CSS Test</title>
</head>
<body style="background-color: gray; font-family: Arial; font-size: 14px;">
 <div style="width: 800px; background-color: white; height: 400px; padding: 0px;">
  <div style="float: left; width: 50%; display: inline; background-color: #00FF00;"><p>Cell 1 floated to left</p></div>
  <div style="float: left; width: 50%; display: inline; background-color: blue; color: white;"><p>Cell 2 floated to left</p></div>
  <div style="clear: both; margin-top: 20px; background-color: red; color: white; height: 50px;"><p>How do I get a margin above this red box?. 
Another thing - why does the default margin of the &lt;p&gt; element get ignored here?</p></div>
</div>
</body>
</html>

If I put the two floated DIV's into another container DIV, the DIV is unlikely to expand properly from what I've seen in the past. Unless you put a <br style="clear: both" /> underneath, which is a bit of a hack that doesn't always work.

Any suggestions would be very welcome.

Thanks,

James

serverman

Hi,

This should be what you're after.

<br clear="all"/>

put this in the parent div to make it expand.

<div style="clear:both"></div>

put this after floating divs to clear their effect. Works from experience.

Replace the HTML in your example page with the following:

 <div style="padding: 0px; width: 800px; background-color: white; height: 400px;">
  <div style="float: left; width: 50%; display: inline; background-color: rgb(0, 255, 0);">
<p>Cell 1 floated to left</p>
</div>
  <div style="float: left; width: 50%; display: inline; background-color: blue; color: white;">
<p>Cell 2 floated to left</p>
<br clear="all"/>
</div>
<div style="clear:both"></div>
  <div style="margin-top: 20px; background-color: red; color: white; height: 50px;">
<p>How do I get a margin above this red box?. Another thing - why does the default margin of the &lt;p&gt; element get ignored here?</p>
</div>
</div>

Hope it helps.

FlameDuck

floaters always give me jip.. and i also find ie actually does display things as I expect them to more often then the other browsers.

That's because (as you correctly point out later in your post) you're expections are wrong.

It's fairly tricky stuff, I'll give you that, so here's a good place to start learning to do it properly. Once you understand how the DOM works, writing semantically correct XHTML is a breeze.

Perturbatio

#10

Develop in Firefox, fix in IE.
IE is a horrible mess, the only reason it renders as you expect is because you have learnt its way of doing things, not because it's any good.

Firefox isn't perfect but it's a damn site better than IE.

<!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" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-uk" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta name="author" content="" />
	<meta name="Copyright" content="" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />  
	<title></title>
<style type="text/css">
<!--
div {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Helvetica, Helv, Arial, sans-serif;
	font-size: small;
}
div#wrap {
	width: 600px;
	margin:auto;
}

div#top-left {
	float:left;
	width: 300px;
	background-color: #effeef;
}
div#top-right{
	float:left;
	width: 300px;
	margin-bottom: 50px;
	background-color: #efeffe;
}
div#bottom {
	height: 80px;
	clear:both;
	background-color: #feefef;
}
-->
</style>
</head>

<body>
	<div id="wrap">
		<div id="top-left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida. Aliquam luctus. Integer congue, nulla sed dictum facilisis, felis turpis ornare quam, sit amet molestie neque erat ac risus. Integer justo elit, egestas vitae, hendrerit et, laoreet elementum, ligula. Proin eu ligula eget urna adipiscing porttitor. Integer eu neque. Mauris ut libero. Vivamus non lectus. Mauris iaculis tempus est. Phasellus aliquet est a magna. Cras ornare est sed sem. Morbi ornare dictum ligula. In hac habitasse platea dictumst. Vestibulum sit amet elit. Praesent vitae massa vitae lectus mattis euismod. Duis nonummy justo vitae lorem.</div>
		<div id="top-right">Maecenas sit amet diam. Pellentesque massa est, vulputate eu, accumsan sed, egestas in, orci. Etiam gravida lectus vel felis. Nam a ipsum. Nam est dolor, convallis eget, consectetuer rhoncus, commodo ut, purus. Ut ut nunc. In hac habitasse platea dictumst. Integer non metus id pede suscipit elementum. Nunc sed dolor non velit sollicitudin adipiscing. Maecenas hendrerit, lacus nec accumsan facilisis, mi libero elementum metus, varius volutpat erat ipsum eget quam. Sed eu augue quis nulla rutrum fringilla. Maecenas et libero. Phasellus gravida rhoncus enim. Sed euismod ante vitae nunc. In hac habitasse platea dictumst. Duis felis. Proin risus dui, vestibulum a, faucibus ut, cursus eget, quam. Quisque et ante. Nunc varius.</div>
		<div id="bottom">Suspendisse potenti. Fusce condimentum, diam venenatis tristique venenatis, quam leo posuere tortor, eget malesuada leo lorem eget odio.</div>
	</div>
</body>
</html>

If you do take my advice, I can highly recommend the firebug extension for firefox, it makes developing sites so much easier.

JKP

#11

Thanks for your help Perturbatio. It looks like the main thing I did differently was to set the margin-top property of the DIV underneath instead of the margin-bottom property of the floating DIV's. I didn't realise it would make such a difference. I still don't understand why browsers render the two code samples so differently.

I'm not a huge fan of IE myself and I have used Firefox for years. I use the web developer add on but I've not tried Firebug. I'll look into it - thanks.

At least it is quite easy to use different CSS for IE using the <!--[if IE]> syntax.

JKP

#12

For some reason it still seems to ignore the top margin of the paragraph in the bottom DIV. I would expect there to be a one line gap above the text like in the other DIV's but it doesn't put it there.

Perturbatio

#13

The issue is that the margin is collapsing.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.maxdesign.com.au/presentation/workshop/slide46.htm
http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php

QuietBloke

#14

its not my thread but thanx for the solutions... very enlightening.