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;
} 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.
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>
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
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
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>
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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
|
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
|
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).
|
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. ...
|
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.
| |
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
|
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>
|
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 }
|
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;
|
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,...
|
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,...
| |
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...
|
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...
|
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...
|
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();...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
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...
| |