By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,364 Members | 1,652 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,364 IT Pros & Developers. It's quick & easy.

floating divs

P: n/a
I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php
Here is the code:
<html>
<head>
<title>
asdf
</title>
<style>
.onetime{float:left; margin-right:1em;width:20em;border:solid 1px;}
.clear { clear: both; line-height: 0px } </style>
</head>
<body>
<div class="onetime">
xxxxxxxxxx
</div>
<div class="onetime">
xxxxxxxxxxx
</div>
<div class="onetime">
xxxxxxxxxxxxx
</div>
<div class="clear">
</div>
<h4>a heading</h4>
</body>
</html>
Nov 4 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
meltedown <gr*****@reenie.org> wrote:
I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php


The header is *not* displayed to the right of the divs, so what are you
on about?

--
Spartanicus
Nov 4 '05 #2

P: n/a
Spartanicus wrote:
meltedown <gr*****@reenie.org> wrote:

I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php

The header is *not* displayed to the right of the divs, so what are you
on about?


Its is in IE, but not in firefox.
Nov 4 '05 #3

P: n/a
meltedown <gr*****@reenie.org> wrote:
I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php

The header is *not* displayed to the right of the divs, so what are you
on about?


Its is in IE


Not in my IE6/win (if I comment out one of the floated divs, otherwise I
don't have sufficient screen width available).

http://homepage.ntlworld.ie/spartanicus/test5.htm

Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).

--
Spartanicus
Nov 4 '05 #4

P: n/a
Spartanicus wrote:
meltedown <gr*****@reenie.org> wrote:

I would like the floating divs to float and then the header to come
after them , on the left. That's what I thought clearing the floats was
for, but in this example, the header is to the right of the floating
divs, nothing is cleared. What am I doing wrong ?
Here is the url:http://www.reenie.org/test/test5.php
The header is *not* displayed to the right of the divs, so what are you
on about?

Its is in IE

Not in my IE6/win


Some how I think we've got mixed up about what "not" means, so let me
clarify.
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.

In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?

(if I comment out one of the floated divs, otherwise I don't have sufficient screen width available).
It shouldn't matter. You shouldn't need the extra screen width because
the divs should float to the left. I put the extra div in there
deliberately to show the floating meachanism. http://homepage.ntlworld.ie/spartanicus/test5.htm

Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).


http://reenie.org/test/test6.php
Here I have followed this suggestion, taking out the empty 'clear' div
and it fixed the problem.
However, now there is another problem. (Which is actually the original
problem that got me started)

In IE/win, the header has the default header top margin.
In firefox, there is no top margin.

Here is the same file again but I have added a 2em margin-top to the header:
http://reenie.org/test/test7.php

The margin is added ABOVE the floating divs, which is crazy. (And now IE
has TOO MUCH margin.

ARRRRRRRRRRRRRRRRRRRRRRRG!!!

Whats the fix for this?
Nov 4 '05 #5

P: n/a
meltedown wrote:
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
Add something to the clearing div.

<div class="clear">&nbsp;
</div>

Now it works in Firefox.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?


Maybe, maybe not. Perhaps Firefox is not displaying/rendering the
*empty* <div>? Makes good sense to me. :-)

--
-bts
-Warning: I brake for lawn deer
Nov 4 '05 #6

P: n/a
Beauregard T. Shagnasty wrote:
meltedown wrote:

http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.

Add something to the clearing div.

<div class="clear">&nbsp;
</div>

Now it works in Firefox.

In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?

Maybe, maybe not. Perhaps Firefox is not displaying/rendering the
*empty* <div>? Makes good sense to me. :-)

OK, I guess that makes sense, but I would not like to add an extra
empty space, even if its only &nbsp; Clearing the header works too.

Nov 4 '05 #7

P: n/a
meltedown <gr*****@reenie.org> wrote:
let me clarify.
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.
If you have problems with a particular client then you need to say so,
we can't read minds here. Both in IE and Opera the header clears the
floats.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?


It's perfectly acceptable not to render an element with no content or
height.
Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).


http://reenie.org/test/test6.php
Here I have followed this suggestion, taking out the empty 'clear' div
and it fixed the problem.
However, now there is another problem. (Which is actually the original
problem that got me started)

In IE/win, the header has the default header top margin.
In firefox, there is no top margin.

Here is the same file again but I have added a 2em margin-top to the header:
http://reenie.org/test/test7.php

The margin is added ABOVE the floating divs, which is crazy. (And now IE
has TOO MUCH margin.


The way that CSS handles collapsing margins is ridiculous and complex,
it's a common cause of author frustration, not least because of the
numerous browser inconsistencies. Throwing floats into the mixture only
makes it worse.

Before explaining further first we need to know what it is that you are
actually trying to do. Maybe the matter can be avoided.

--
Spartanicus
Nov 4 '05 #8

P: n/a
But take note: FF 1.5 Beta renders it the same as IE 6 - that is, it
renders the empty <div> and causes the heading to fall on a new line.
Opera does the same. Netscape 8.0.3.3, however, renders as described
for FF 1.0

What is the actual CSS spec for the rendering of an empty div with no
height or width defined, but with clear:both set?

Nov 4 '05 #9

P: n/a
Spartanicus wrote:
meltedown <gr*****@reenie.org> wrote:

let me clarify.
http://reenie.org/test/test5.php
In Firefox, 1.0.7/win the header is to the right of the floating divs.
The clear is not working.

If you have problems with a particular client then you need to say so,


Yes I realize that. My bad. we can't read minds here. Both in IE and Opera the header clears the
floats.
In IE6/Win the header is below the divs where it supposed to be.
Is this a browser glitch or what ?

It's perfectly acceptable not to render an element with no content or
height.

Btw, if an existing element is available, use that to attach the clear
property to (in the example you can use the h4, no need for the div).


http://reenie.org/test/test6.php
Here I have followed this suggestion, taking out the empty 'clear' div
and it fixed the problem.
However, now there is another problem. (Which is actually the original
problem that got me started)

In IE/win, the header has the default header top margin.
In firefox, there is no top margin.

Here is the same file again but I have added a 2em margin-top to the header:
http://reenie.org/test/test7.php

The margin is added ABOVE the floating divs, which is crazy. (And now IE
has TOO MUCH margin.

The way that CSS handles collapsing margins is ridiculous and complex,
it's a common cause of author frustration, not least because of the
numerous browser inconsistencies. Throwing floats into the mixture only
makes it worse.

I get along with it pretty well, but I don't get along with liquid
layouts. The only thing I can do is slog through the problems one by
one hoping eventually I'll get the hang of it. I always give it a try
but I usually give up and use tables, or non-liquid divs. (What's the
word for that? static ? ).
Before explaining further first we need to know what it is that you are
actually trying to do. Maybe the matter can be avoided.
I want to have a series of floating divs and then, below that, a header
with a normal header top-margin. If I could get Firefox to do what IE
does to http://reenie.org/test/test7.php , that would be nice. And of
course, they should both look the same

Nov 4 '05 #10

P: n/a
"Tony" <to****@dslextreme.com> wrote:
What is the actual CSS spec for the rendering of an empty div with no
height or width defined, but with clear:both set?


Afaik there is no defined behaviour for such cases. Browsers are free to
"render" such an element, or drop it.

The HTML 4 spec prose says that UAs should ignore empty P elements, but
afaik there is no such requirement for other empty elements.

--
Spartanicus
Nov 4 '05 #11

P: n/a
meltedown wrote:

I want to have a series of floating divs and then, below that, a header
with a normal header top-margin. If I could get Firefox to do what IE
does to http://reenie.org/test/test7.php , that would be nice. And of
course, they should both look the same


..clear { clear: left;padding-top:2em; }

--
Gus
Nov 5 '05 #12

P: n/a
Gus Richter wrote:
meltedown wrote:

I want to have a series of floating divs and then, below that, a
header with a normal header top-margin. If I could get Firefox to do
what IE does to http://reenie.org/test/test7.php , that would be nice.
And of course, they should both look the same


.clear { clear: left;padding-top:2em; }

Almost but not quite. Thanks for the idea, though.
Here they look the same:
http://reenie.org/test/test8.php

I used padding, but I also had to take away the header's margin-top
because IE shows the the header's padding and margin while Firefox only
shows the padding.
Nov 5 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.