assorted misbehaviours around float: left

Chris Sharman

I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

essentially it's just a list of links.

I've split it into two columns with a floated left div, and therein lie
the problems.

It's valid 4.01 strict, but none of ie, moz, or ff correctly offset the
right div - it overlaps the longest line on the left (CCA External Web
Site Statistics Reports).

On moz & ff, fortuitous indentation on the right prevents actual
overlaying of text; but they have a spurious linefeed at the top of the
left div.

ie doen't have the linefeed, but doesn't do any sublist indentation on
the right for some reason, so the text is overprinted.

Have I done something stupid, or does this page really demonstrate
multiple bugs in all major browsers ?

I originally had one master <ul> with the left & right divs inside it,
but I suspected that was illegal, so I made it one <ul> in each div.

As I say, I've moved the page to the www for you to see, so I know about
the broken links.

Thanks
Chris

Jul 21 '05 #1

Subscribe Reply

2874

Chris Sharman

Chris Sharman wrote:

I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

essentially it's just a list of links.

I've split it into two columns with a floated left div, and therein lie
the problems.

It's valid 4.01 strict, but none of ie, moz, or ff correctly offset the
right div - it overlaps the longest line on the left (CCA External Web
Site Statistics Reports).

On moz & ff, fortuitous indentation on the right prevents actual
overlaying of text; but they have a spurious linefeed at the top of the
left div.

ie doen't have the linefeed, but doesn't do any sublist indentation on
the right for some reason, so the text is overprinted.

Have I done something stupid, or does this page really demonstrate
multiple bugs in all major browsers ?

I originally had one master <ul> with the left & right divs inside it,
but I suspected that was illegal, so I made it one <ul> in each div.

As I say, I've moved the page to the www for you to see, so I know about
the broken links.
Yet to master follow-ups. Sorry.
Thanks
Chris

Jul 21 '05 #2

Chris Sharman

Danny@Kendal wrote:

"Chris Sharman" <ch***********@ sorry.nospam> wrote in message
I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

I've split it into two columns with a floated left div, and therein lie
the problems.
Float *both* main <div> elements.

Thanks - that fixes it (although I now get the extra blank line at the
top of both divs).
But why ?
I thought a straight unstyled div should just abut the existing floated
left div, if there's room ?
Add style="clear:bo th" to the third <div> element if you want it to appear beneath them.

Yes, better, and necessary now the second's floating too.
Posted at dtest2.html.

Thanks,
Chris

Jul 21 '05 #3

Gus Richter

Chris Sharman wrote:

Danny@Kendal wrote:
"Chris Sharman" <ch***********@ sorry.nospam> wrote in message
I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).

I've split it into two columns with a floated left div, and therein lie
the problems.

Float *both* main <div> elements.

Thanks - that fixes it (although I now get the extra blank line at the
top of both divs).
But why ?
I thought a straight unstyled div should just abut the existing floated
left div, if there's room ?
> Add style="clear:bo th" to the third <div> element if you want it to

appear
> beneath them.

Yes, better, and necessary now the second's floating too.
Posted at dtest2.html.

In your page, the best method to render in Moz/FF and IE alike is
probably to float:left; both divs as suggested with a clear:left; on the
following HR element.
Place borders around your divs to see that the margins are coming from
H2's margin-bottom and from UL's margin-top. Alter them as needed.

Here is an explanation of what was happening in your code.
Moz/FF follow the rules but not IE.

The left div is floated, so is out of the flow and sets at the point of
H2's margin-bottom.
The right div has a margin-top just as H2 has a margin-bottom and they
are collapsed whereby the smallest value is dropped. Hence the
difference of points of reference for the two divs.

The three solutions are:
1. Set H2's margin-bottom to zero to abut the H2 and float boxes, or
2. Add a border to the right div to prevent H2's margin-bottom
and the right div's margin-top from collapsing, or
3. Add padding-top to the right div to prevent H2's margin-bottom
and the right div's margin-top from collapsing.

Also add margin-left:300px; to the right div in order to clear the
list markers which are outside of the box.
Another thing is that IE doesn't do things right, so not the same.

--
Gus

Jul 21 '05 #4

Chris Sharman

Gus Richter wrote:

Place borders around your divs to see that the margins are coming from
H2's margin-bottom and from UL's margin-top. Alter them as needed.

Here is an explanation of what was happening in your code.
Moz/FF follow the rules but not IE.

The left div is floated, so is out of the flow and sets at the point of
H2's margin-bottom.
The right div has a margin-top just as H2 has a margin-bottom and they
are collapsed whereby the smallest value is dropped. Hence the
difference of points of reference for the two divs.

Now I get it - thanks very much

Chris

Jul 21 '05 #5

Similar topics

13935

Stop text wrapping around image

by: Suzanne Boyle | last post by:

I have the following code in a webpage: <p><img src="images/clydesdale.gif" width="100" height="41" style="float: left;" /> <strong>Test</strong><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br /> visit website

HTML / CSS

5028

float text around image

by: steven | last post by:

Hi, I can float the image left or right so the text will float around it, but only if the top of the image is aligned with the start of the paragraph. I'd like the image be a little below that, so the text appears above, left and below the image. The text is a single paragraph. Thanks for any help. Steven

HTML / CSS

6192

How to float text around image

by: mike | last post by:

Hello, What I would like is to float some text around the image where the text starts align on the left or right of the image aligned to the top of the image and then wrap around the image. I have tried using the .imgright {float: right;} or .imgleft {float: left;} in my draft css. I have looked at other suggestion on the net by using a span class but I am having problems adding it to my <div class="contpara" now such luck. Here is my...

HTML / CSS

11119

Is it possible to have 2 div beside eachother and one not wrap around?

by: Dan V. | last post by:

Is it possible to have 2 divs beside each other and one not wrap around? I realize the 2 div's are floating left but I can only think of this as the best solution for now. I am trying to get the thumbnail photos and the large home rendering on top not to wrap, and only the interior/exterior photos to wrap. What do you recommend? http://www.officeactivate.com/schuit/madison.shtml

HTML / CSS

1612

Assorted questions from a C++ programmer

by: V.Ch. | last post by:

In near future I can face a prospect of writing some stuff in C. Being a C++ programmer, I've got practically no experience in C. I'd be obliged if someone could answer the following questions (from specific to more general): 1. Having looked though some C sources I was horrified by the number of macros. E.g., what could be the purpose of using this: #define CFG_REF(c, f) ((c) -> f) #define SERVER_ADDRESS(c) CFG_REF (c, server_address)

C / C++

2052

HELP: Float Left box is drifting to the right in ie!

by: jonipony | last post by:

HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600 (looks fine at larger screen sizes) when the left menu box that should float left is drifting to the right in Internet Explorer 6.0 (it doesn't drift to the right in Netscape 7.1).

HTML / CSS

8330

text wrap around image: how can we do it with css?

by: Zhang Weiwu | last post by:

Hello. I have been using word processor like OOO for nearly 10 years and such layout is very usual to me: gopher://sdf.lonestar.org/I/users/weiwu/ooo_wrap_correctly.png but I found it's very difficult to achieve the same layout with HTML/css. The best result I can achieve is like this: gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xml

HTML / CSS

2256

Text wrapped around a picture -- picture longer than text

by: Jonathan Sachs | last post by:

I'm trying to compose a list of items, each of which consists of text that wraps around a picture at the left margin. The examples I have seen tell me to do it like this: <p><img src="xxxx.jpg" align="left" width=nn height=nn>zzz zzzzz zz zzzzz...</p> In my case, since the wrapped text includes a headline, I assume I am supposed to do this:

HTML / CSS

3372

css float left and linebreak

by: Gozil | last post by:

Hey, Is it possible to change line on a float object? For example let say I have one <b> tag, one <p> tag and one <img> tag: I want the <img> to have float right and the <b> to have float left then I want the <p> to have float none so it will go around the image. However if I have float left on the <b> tag the <p> will stay on the same line as <b> and the only way I know how to move it down is by giving the <b> tag a width on 100% see...

HTML / CSS

9645

What is ONU?

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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9481

Changing the language in Windows 10

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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10341

Problem With Comparison Operator <=> in G++

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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10155

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

7502

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5383

Trying to create a lan-to-lan vpn between two differents networks

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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5513

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4054

transfer the data from one system to another through ip address

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

C# / C Sharp

2881

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General