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  2786 
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: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
| |
