Hi group,
I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example:
<html><body>
<div id='left' style='float:le ft; border:1px solid red;'>Floated left</div>
<div id='right' style='float:ri ght; border:1px solid blue;'>Floated right</div>
<div id='clear' style='clear:bo th; height:0px; overflow:hidden ;'> </div>
<div id='other' style='margin-top:20px; border:1px solid green;'>This should be 20px beneath Left and Right</div>
</body></html>
I'm trying to get the clear-div to clear all floats, without actually being rendered. But Firefox apparently thinks a div with height==0 shouldn't have any influence at all on the document.
How can I solve this problem? How else can I do this?
Thanks,
Niels 18  8065 
Niels wrote: I'm trying to get the clear-div to clear all floats,
without actually being rendered. But Firefox apparently
thinks a div with height==0 shouldn't have any influence at
all on the document.
How can I solve this problem? How else can I do this?
Why don't you give it 1px height?
If you set the margins to 0, I'm sure no one will notice the
existence of the div.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els wrote: Why don't you give it 1px height?
True, that works. But why?
If you set the margins to 0, I'm sure no one will notice the
existence of the div.
I would. I suppose I could live with it, and I think I've done it before
somewhere else to solve the problem. But I feel it's a hack, and I don't
understand why Firefox apparently misbehaves like this.
Come to think of it, lately I've had several situations where Firefox was a
little too clever for it's own good.
Thanks though,
Niels
Niels wrote: Els wrote:
Why don't you give it 1px height?
True, that works. But why?
Because it's a height.
height:0; is not a height. I find it quite logical for a
browser to ignore the presence of anything without any volume.
(what colour do you see when a blue line has zero length?)
Not saying it's proper behaviour - I haven't checked the specs
on it. Doesn't matter though, even if it's proper behaviour,
the other browsers are acting differently anyway.
If you set the margins to 0, I'm sure no one will notice
the existence of the div.
I would. I suppose I could live with it, and I think I've
done it before somewhere else to solve the problem. But I
feel it's a hack, and I don't understand why Firefox
apparently misbehaves like this.
Another way is of course to set the clear:both; property to
the next element, without using a seperate div for it.
Come to think of it, lately I've had several situations
where Firefox was a little too clever for it's own good.
<g>
And it's getting cleverer with each version. Firefox 0.9 is
the first Gecko to center a page properly without needing
hacks to make it stay inside the window. Firefox 0.8 still
needed the hack.
(see http://locusmeus.com/html-css/pageslipping.html )
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
In article <jo************ ********@news00 0.worldonline.d k>, th************* **@thisisnotmys erver.dk says... <div id='clear' style='clear:bo th; height:0px; overflow:hidden ;'> </div>
Won't
<div style="clear:bo th;"></div>
Work?
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Lauri Raittila wrote: Won't
<div style="clear:bo th;"></div>
Work?
No, that's even worse. That will put the "other"-div between the Left and
Right. I can't decide why it does that...
Niels
Niels wrote: Lauri Raittila wrote:
Won't
<div style="clear:bo th;"></div>
Work?
No, that's even worse. That will put the "other"-div
between the Left and Right. I can't decide why it does
that...
That doesn't make any sense, really.
If the third div has style="clear:bo th;", the 4th div can't go
up between the first and second, unless you give it
position:absolu te;
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els wrote: Because it's a height.
height:0; is not a height. I find it quite logical for a
browser to ignore the presence of anything without any volume.
Hmm... perhaps. On the other hand, a simple <br> doesn't have any volume as
such, but it still changes the document.
(what colour do you see when a blue line has zero length?)
None, obviously. But the document still contains it, and even if I can't see
it, it might influence other elements.
I agree that it a tricky subject.
Not saying it's proper behaviour - I haven't checked the specs
on it. Doesn't matter though, even if it's proper behaviour,
the other browsers are acting differently anyway.
And it's annoying.
Another way is of course to set the clear:both; property to
the next element, without using a seperate div for it.
I don't see how that would work.
However, this seems to work:
<br style='clear:bo th'>
I'll use that for now. Come to think of it, lately I've had several situations
where Firefox was a little too clever for it's own good.
<g>
And it's getting cleverer with each version. Firefox 0.9 is
the first Gecko to center a page properly without needing
hacks to make it stay inside the window. Firefox 0.8 still
needed the hack.
(see http://locusmeus.com/html-css/pageslipping.html )
I haven't run into that one, fortunately.
I seems to me that Mozilla repeats the mistake of Explorer trying to
interpret the code, and thereby enabling bad coding. All in the name of
compatibility and market share. I just found out today that Firefox
apparently tries to guess mimetypes based on content, and ignores the
mimetype sent by the server. I'll have to investigate further before making
conclusions.
I'm quite annoyed about the whole quirks mode concept, but I suppose I'll
have to study it more before I can really start to hate it.
Thanks for the chat, my problem seems to be solved,
Niels
In article <v8************ ********@news00 0.worldonline.d k>, th************* **@thisisnotmys erver.dk says... Lauri Raittila wrote:
Won't
<div style="clear:bo th;"></div>
Work?
No, that's even worse. That will put the "other"-div between the Left and
Right. I can't decide why it does that...
What browser? URL?
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Els wrote: No, that's even worse. That will put the "other"-div
between the Left and Right. I can't decide why it does
that...
That doesn't make any sense, really.
If the third div has style="clear:bo th;", the 4th div can't go
up between the first and second, unless you give it
position:absolu te;
That's what I thought. I does that, however, in Firefox. I sort of makes
sense, using your own idea of empty things not being rendered. Plus some
Firefox magic...
//Niels This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: thx |
last post by:
I have MySQL 4.0.18 on Windows 2000 and I have a problem with floats
and decimals. The table has floats and decimals fields but when I
enter non-integers in these fields, they get rounded. So if I put
(either via PHP or the console or MySQL Control Center) 155.82 in a
float field, it is stored as 156. WHY IS THIS HAPPENING??
thanks
|
by: Charles Blaquière |
last post by:
While noodling around, looking for a good layout for an "events calendar"
page, I came upon a problem that has me stymied.
Have a look at http://kpuc.org/events/upcoming-2.html .
The basic structure of each event is:
Event div
Left-floated image
Event header div
|
by: Drue |
last post by:
Example page:
http://www.splatteredink.net/test/
It is a two column layout with header. The header and two columns are in a
container div. The left column is floated left. The text of the left column
is in a div nested within the left column div because of the box-model
hack. There is another hack using margins to get the right column...
|
by: Michael Rozdoba |
last post by:
I want to set a background colour on one level of headings, but have
their width span only the text & a small amount of padding.
I was styling display to inline to achieve this.
Then I realised I need to have clear: left, to keep the headings against
the lefthand side, should they come near floats.
I can't see how to do this without...
|
by: Andrey Tarasevich |
last post by:
Hello
Consider the following HTML code sketch
<div>
<img src="..." style="float: left">
<p>Paragraph text</p>
</div>
<hr>
| | |
by: yb |
last post by:
Hi,
Is there a CSS method to clear a float such that it aligns with the
left content edge.
For example:
X X X
X X X
X X
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
| | |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
