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)behaviour 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 5329
"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)behaviour 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.infosystems. 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)behaviour 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"
<cupsdell0311XXX@-@-@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)behaviour 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.infosystems. 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.infosystems.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...
|
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...
|
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...
|
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,...
|
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...
|
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)
{...
|
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...
|
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: 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: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
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: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
| |