473,657 Members | 2,934 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

css float behaviour IE & Gecko

I am trying to achieve a simple page layout using only divs and css. I know that
people bad mouth IE for non-conformance, but in this case IE's(6.0)behavi our is
entirely the way I expect, and Gecko (Firefox/1.0) is, well, not.

I have a left menu div, and a right content div, float left, the width of which
is auto. My intention is that the content should fill the space to the right of
the menu.

In IE putting a float right div in the right content div forces the right
content to expand to fill the space to the right of the menu. In Gecko, it
expands to fill the whole width of the page, and drops the right div *below* the
menu.

Incidentally Dreamweaver's preview pane follows IE

How do I achieve my intention in both browsers?

TIA
Jim

<html>
<head>
<title>demot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="demo.css" rel="stylesheet " type="text/css">
</head>

<body>

<div class = "leftmenu">
<p>left menu</p>
<p>black</p>
</div>

<div class = "rightblock ">
rightblock blue
<div class="floater" > floater red </div>
</body>
</html>

=============== =============== ==============

div.leftmenu
{
float: left;
border: thin solid #000000;
}

div.rightblock
{
float: left;
width: auto;
border: solid #000099;
}

div.floater
{
float: right;
margin: 5px 5px 5px 5px;
border: 1px solid #FF0000;
}
Jul 23 '05 #1
6 5342
"Jim Lawton" <uc**@use.your. initiative> wrote in message
news:4v******** *************** *********@4ax.c om...
I am trying to achieve a simple page layout using only divs and css. I know
that
people bad mouth IE for non-conformance, but in this case
IE's(6.0)behavi our is
entirely the way I expect, and Gecko (Firefox/1.0) is, well, not.
The odds are that Firefox is doing the right thing.
<html>


You have no DOCTYPE. This will trigger quirks mode. See what happens if
you add (say) an HTML 4.01 DOCTYPE, which will trigger standards mode.

Jul 23 '05 #2
in comp.infosystem s.www.authoring.html, Jim Lawton wrote:
I am trying to achieve a simple page layout using only divs and css. I know that
people bad mouth IE for non-conformance, but in this case IE's(6.0)behavi our is
entirely the way I expect, and Gecko (Firefox/1.0) is, well, not.

I have a left menu div, and a right content div, float left, the width of which
is auto. My intention is that the content should fill the space to the right of
the menu.
You have 2 floats with width auto. Correct behaviuour by CSS2 spec is to
render both of them full width, one above another. MacIE5 does that

Correct by CSS2.1 is to shrink wrap floats, but shrink wrapping algorithm
is not defined, so, both renderings sound correct.
In IE putting a float right div in the right content div forces the right
content to expand to fill the space to the right of the menu. In Gecko, it
expands to fill the whole width of the page, and drops the right div *below* the
menu.
This is unfortunately nit really possible whiout CSS tables, which IE
doesn't support. There is n+1 more or less working workarounds though
Incidentally Dreamweaver's preview pane follows IE
Most likely because it uses IE for display the site?
How do I achieve my intention in both browsers?


URL?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #3
On Mon, 20 Dec 2004 08:43:23 -0500, "C A Upsdell"
<cupsdell0311XX X@-@-@XXXrogers.com> wrote:
"Jim Lawton" <uc**@use.your. initiative> wrote in message
news:4v******* *************** **********@4ax. com...
I am trying to achieve a simple page layout using only divs and css. I know
that
people bad mouth IE for non-conformance, but in this case
IE's(6.0)behavi our is
entirely the way I expect, and Gecko (Firefox/1.0) is, well, not.
The odds are that Firefox is doing the right thing.


This I know - what I want is consistent behaviour - who is compliant is
inconsequential :-)
<html>


You have no DOCTYPE. This will trigger quirks mode. See what happens if
you add (say) an HTML 4.01 DOCTYPE, which will trigger standards mode.


sorry, I omitted it from the example - it doesn't help :-(

thanks anyway,
Jim
Jul 23 '05 #4
On Mon, 20 Dec 2004 15:53:51 +0200, Lauri Raittila <la***@raittila .cjb.net>
wrote:

Kiitos vastaustanne :-) Kyla", puhun va"ha"n suomea - a"la" kysya" kuinka ...

You have 2 floats with width auto. Correct behaviuour by CSS2 spec is to
render both of them full width, one above another. MacIE5 does that
Sorry I wasn't clear - only the right div has width auto, the HTML & CSS were
posted in the OP, but now I've stuck it here :-
http://www.jimlawton.info/cssdemo

or

http://www.jimlawton.info/cssdemo/index.htm


Correct by CSS2.1 is to shrink wrap floats, but shrink wrapping algorithm
is not defined, so, both renderings sound correct.

sound :-)
In IE putting a float right div in the right content div forces the right
content to expand to fill the space to the right of the menu. In Gecko, it
expands to fill the whole width of the page, and drops the right div *below* the
menu.


This is unfortunately nit really possible whiout CSS tables, which IE
doesn't support. There is n+1 more or less working workarounds though


ha! - but I'm not exactly an expert, and that's why I asked the question ...

Incidentally Dreamweaver's preview pane follows IE


Most likely because it uses IE for display the site?

you're right - I stopped concentrating
How do I achieve my intention in both browsers?

URL?


see earlier
kiitos taas,

Jim
Jul 23 '05 #5
in comp.infosystem s.www.authoring.html, Jim Lawton wrote:
On Mon, 20 Dec 2004 15:53:51 +0200, Lauri Raittila <la***@raittila .cjb.net>
wrote:
You have 2 floats with width auto. Correct behaviuour by CSS2 spec is to
render both of them full width, one above another. MacIE5 does that


Sorry I wasn't clear - only the right div has width auto,


Initial width is auto, and you didn't have width in you OP.
http://www.jimlawton.info/cssdemo


There you have width. So why don't you use margin for that right side
thingy instead of floating it, supposing you do float it because you want
to prevent problem of having block under menu?

As I said, auto in float in CSS2.1 will shrink wrap. What happens with
that red floater should have no effect on left menu and rightblock.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #6
On Mon, 20 Dec 2004 17:59:19 +0200, Lauri Raittila <la***@raittila .cjb.net>
wrote:
in comp.infosystem s.www.authoring.html, Jim Lawton wrote:
On Mon, 20 Dec 2004 15:53:51 +0200, Lauri Raittila <la***@raittila .cjb.net>
wrote:

>You have 2 floats with width auto. Correct behaviuour by CSS2 spec is to
>render both of them full width, one above another. MacIE5 does that


Sorry I wasn't clear - only the right div has width auto,


Initial width is auto, and you didn't have width in you OP.
http://www.jimlawton.info/cssdemo


There you have width. So why don't you use margin for that right side
thingy instead of floating it, supposing you do float it because you want
to prevent problem of having block under menu?

As I said, auto in float in CSS2.1 will shrink wrap. What happens with
that red floater should have no effect on left menu and rightblock.

thanks for the help
j
Jul 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2302
by: Rainer Birkenmaier | last post by:
Hi Folks, I have 2 little problems: 1) http://birkenmaier.org/b.php IE 6.0 does something weired here: in the red box the first lines of text have a slight indet (2 or 3 pixels only). This seems to be triggered by the floating box on the left (yellow), since only the text lines that span the height of the floating box are affected. 2) http://birkenmaier.org/c.php
2
1880
by: Rainer Birkenmaier | last post by:
Hi again, This float-thing with IE is really killing me ... anyway here two new questions: 1) Check out http://birkenmaier.org/a.php If you display this using IE the margin between the left-middle blue box ("Seitenleiste") and the lower blue box ("the credits") is double as high as expected. The problem can be fixed by having
2
1627
by: Daniel Déchelotte | last post by:
Hi crowd, Please have a look at this page, where I try to have a framed block next to a floated one: http://yo.dan.free.fr/float_n_div.html Above is the best result I got so far. Works in (decently recent) IE and gecko-based browsers, unperfect in Opera. Below is what I try to avoid: the border and the background of the grey block extend below the red square (normal behaviour, but unpleasant one).
3
1578
by: Kyle Matthews | last post by:
Hello all, I am currently working on a 2 column layout in which the smaller column is fixed at 100px, and the larger column takes up the remaining space. In Gecko browsers (Firefox, Netscape, Mozilla) sometimes the smaller columns juts out to the right of the container 1px, and sometimes doesn't reach the end by 1px. You can observe the phenomenon at http:/www.digitalovertone.com/examples/floatprob.php. All the CSS is in the header. ...
20
2685
by: Joe exCSSive | last post by:
Hi, folks: I'm back...and now I'm really stuck !! I have a graphic ( http://www.sundialontario.com/images/makeitatable.jpg ) that I would like to convert to CSS and I'm not sure how to do this.
8
15484
by: SAN CAZIANO | last post by:
i have to do in the onkeypress or in onchange the float (real) field validation I try something: function ValidaCampo(nomeCampo,TotInteri,TotDecimali) { DecimalPos=NomeCampo.value.Indexof(','); Lungh=TotInteri+TotDecimali+1; //sum the ineger + decimal + decimal separator
11
4054
by: Dennis | last post by:
Please bear with me ... I am a newbie to DIVs. Why does the following work in IE6, but not in NS7? ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> ><HTML> > ><HEAD> > <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> > <TITLE>DIV float Example</TITLE>
16
12785
by: Enekajmer | last post by:
Hi, 1 int main() 2 { 3 float a = 17.5; 4 printf("%d\n", a); 5 printf("%d\n", *(int *)&a); 6 return 0; 7 }
29
11080
by: candy_init | last post by:
Hi all, I just came across the following program: #include <stdio.h> int main() { float a = 12.5; printf("%d\n", a); printf("%d\n", *(int *)&a); return 0;
0
8302
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,...
1
8499
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 most users, this new feature is actually very convenient. If you want to control the update process,...
0
8601
tracyyun
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7314
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6162
isladogs
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...
0
5630
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4150
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...
0
4300
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
1601
bsmnconsultancy
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.