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> 12  2754 
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
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.
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
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?
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">
</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
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">
</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 Clearing the header works too.
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
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?
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
"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
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
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Olly |
last post by:
I am using the following pure css layout with a header and footer:
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml
The left column floats to the left of the main content (middle...
|
by: veerleverbr |
last post by:
Hi,
I have the following html:
<div id="content">
<div id="leftpart">...</div>
<div id="rightpart">...</div>
</div>
leftpart en rightpart are in the css set to float left. The content of...
|
by: StevePBurgess |
last post by:
I have a website which, on the main page, has two floating divs. One
contains a list of navigation menu items and the other is themain
content of the page.
Occasionally that div that contains...
|
by: Arnost Sobota |
last post by:
Hello,
Suppose I want to play with DIVs as if they were type characters. I have
a series of fixed-height (width is of no importance) blocks which must
follow one another from left to right, with...
|
by: tbirnseth |
last post by:
I'm having trouble between IE and FF. For once, IE behaves as I would expect, but FF doesn't.
Basically I have a container with two floating DIVs in it. One floats left and the other right. I then...
|
by: yawnmoth |
last post by:
How do you get both of these div's to have a 100% width? (1):
<div style="float: left; background: black; color: white">Hello, world!
</div>
<div style="clear: both; background: blue; color:...
|
by: benwah1983 |
last post by:
Greetings,
Here is my problem:
The following code shows a div with two small nested divs (images with a title), then the div is closed. Another one opens and a "random text" is displayed.
<div...
|
by: dlite922 |
last post by:
This is just barely above my head when it comes to css.
I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The...
|
by: nlindsay |
last post by:
I am trying to center align 2 left floated divs within a % width background. I know that setting the wrapper div to a fixed width works, but can it be done with a fluid background? (basically I...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM)
The start time is equivalent to 19:00 (7PM) in Central...
|
by: erikbower65 |
last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps:
1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal.
2. Connect to...
|
by: linyimin |
last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
|
by: kcodez |
last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
|
by: Taofi |
last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same
This are my field names
ID, Budgeted, Actual, Status and Differences
...
|
by: DJRhino1175 |
last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this -
If...
|
by: Rina0 |
last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
|
by: lllomh |
last post by:
How does React native implement an English player?
|
by: Mushico |
last post by:
How to calculate date of retirement from date of birth
| |
