Here's the test page:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Te st</title>
<style type="text/css">
#Wrapper
{
width: 750px;
border: 10px solid black;
background-color: Purple;
}
#Content
{
margin: 15px 30px 0px 30px;
border: 5px solid Blue;
background-color: White;
border: 5px solid Blue;
width: 660px;
}
#FloatLeft
{
background-color: Yellow;
border: 5px solid Red;
margin-top: 25px;
float: left;
width: 320px;
}
#FloatRight
{
background-color: Yellow;
border: 5px solid Green;
margin-top: 25px;
float: right;
width: 320px;
}
#Footer
{
margin-top: 50px;
background-color: White;
border: 5px solid Blue;
width: 740px;
}
</style>
</head>
<body>
<div id="Wrapper">
<div id="Content">Co ntent
<div id="FloatLeft"> FloatLeft</div>
<div id="FloatRight" >FloatRight</div>
</div>
<div id="Footer">Foo ter</div>
</div>
</body>
</html>
On Windows, IE6, Opera 7.2, and Mozilla Firebird 0.7 all render this
slightly different. The layout I'm trying to achieve is the way its
rendered in IE6. Which browser gets this correct, and how might I achieve
the desired layout in all three browsers? 5  4564 
Mike Irwin wrote:
On Windows, IE6, Opera 7.2, and Mozilla Firebird 0.7 all render this
slightly different. The layout I'm trying to achieve is the way its
rendered in IE6. Which browser gets this correct, and how might I achieve
the desired layout in all three browsers?
Well, according to CSS 2.1 (see http://www.w3.org/TR/CSS21/visudet.h...eight-property, paragraph
10.6.3), floated elements should not be taken into account when
calculating the height of a block-level element.
This means that your div#Content has just the height of its textual
content, #FloatLeft and #FloatRight are out of the normal flow, that's
why they appear outside of the #Content in Firebird... and in CSS
2.1-compliant browsers. (Yes, IE6 is wrong again).
A solution you might want to use in your fixed-size example would be to
explicitly set the height property on the #Content, for example:
div#Content { height: 60px ; }
"Vincent" <vincent.@.fr > wrote in message
news:bm******** **@news-reader2.wanadoo .fr... Well, according to CSS 2.1 (see
http://www.w3.org/TR/CSS21/visudet.h...eight-property, paragraph
10.6.3), floated elements should not be taken into account when
calculating the height of a block-level element.
This means that your div#Content has just the height of its textual
content, #FloatLeft and #FloatRight are out of the normal flow, that's
why they appear outside of the #Content in Firebird... and in CSS
2.1-compliant browsers. (Yes, IE6 is wrong again).
A solution you might want to use in your fixed-size example would be to
explicitly set the height property on the #Content, for example:
div#Content { height: 60px ; }
It's not really the height that matters to me, but the fact that the two
floated divs ignore the margin-top value in #Footer. According to my
understanding, and maybe I'm reading http://www.w3.org/TR/CSS2/box.html#collapsing-margins wrong, but it says
that "Vertical margins between a floated box and any other box do not
collapse." Opera and IE both add the margin, but Firebird does not.
"Mike Irwin" <mi**@faroutfre akyshit.com> wrote in message
news:Zo******** ********@bignew s3.bellsouth.ne t... "Vincent" <vincent.@.fr > wrote in message
news:bm******** **@news-reader2.wanadoo .fr... Well, according to CSS 2.1 (see
http://www.w3.org/TR/CSS21/visudet.h...eight-property, paragraph
10.6.3), floated elements should not be taken into account when
calculating the height of a block-level element.
This means that your div#Content has just the height of its textual
content, #FloatLeft and #FloatRight are out of the normal flow, that's
why they appear outside of the #Content in Firebird... and in CSS
2.1-compliant browsers. (Yes, IE6 is wrong again).
A solution you might want to use in your fixed-size example would be to
explicitly set the height property on the #Content, for example:
div#Content { height: 60px ; }
It's not really the height that matters to me, but the fact that the two
floated divs ignore the margin-top value in #Footer. According to my
understanding, and maybe I'm reading
http://www.w3.org/TR/CSS2/box.html#collapsing-margins wrong, but it says
that "Vertical margins between a floated box and any other box do not
collapse." Opera and IE both add the margin, but Firebird does not.
IE and Opera are interpreting the declarations wrongly.
Floated elements are taken out of the flow but relative to the containing
element, and the containing element only.
The flowed elements are the content div and the footer div. The distance
drawn between them should be 50px as declared by #Footer.
To suggest the IE6/Opera display, remove the margin-top rule on the floated
elements and put the floated elements in a div with margin-top:25px nested
in the content div.
Louise
"boclair" <bo*****@bigpon d.net.au> wrote in message
news:bm******** ****@ID-210679.news.uni-berlin.de... IE and Opera are interpreting the declarations wrongly.
Floated elements are taken out of the flow but relative to the containing
element, and the containing element only.
The flowed elements are the content div and the footer div. The distance
drawn between them should be 50px as declared by #Footer.
To suggest the IE6/Opera display, remove the margin-top rule on the
floated elements and put the floated elements in a div with margin-top:25px nested
in the content div.
OK, at least I know who's to blame now. I've wrapped the floating divs in
another div which sets the margins I want, and although the margins aren't
quite the same in any of the browsers I'm testing with, it'll work for now.
Thanks for the help.
"Mike Irwin" <mi**@faroutfre akyshit.com> wrote in message
news:qH******** *********@bigne ws3.bellsouth.n et... "boclair" <bo*****@bigpon d.net.au> wrote in message
news:bm******** ****@ID-210679.news.uni-berlin.de... IE and Opera are interpreting the declarations wrongly.
Floated elements are taken out of the flow but relative to the
containing element, and the containing element only.
The flowed elements are the content div and the footer div. The
distance drawn between them should be 50px as declared by #Footer.
To suggest the IE6/Opera display, remove the margin-top rule on the floated elements and put the floated elements in a div with margin-top:25px
nested in the content div.
OK, at least I know who's to blame now. I've wrapped the floating divs in
another div which sets the margins I want, and although the margins aren't
quite the same in any of the browsers I'm testing with, it'll work for
now.
Thanks for the help.
Hi Mike
If you put an empty div after the two floated divs, and nest it inside the
content div, then the content div will contain the two floated divs and the
top margin on the footer div will be OK
<div id="Wrapper">
<div id="Content">Co ntent
<div id="FloatLeft"> FloatLeft</div>
<div id="FloatRight" >FloatRight</div>
<div style="clear: both;"></div>
</div>
HTH
David This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: jon slinn |
last post by:
Does anybody know why I can't get a simple two col design to work
using the following css? At the moment my columns seem to be arranging
left and right correctly but are stacked on top of each other?
the site is : http://www.rockshore.net/html/hol2.html
div.lh-col{
width: 18%;
float:left;
border: solid #333333;
|
by: trialanderror |
last post by:
I've been happily chugging along thinking I understood floating divs
and now find that I know a lot less than I thought I did. And the
more I try "fixing" things, the worse it gets. A lot of what I'd been
doing looked okay in IE 6.0, but in Gecko browsers like my Netscape
7.1 (I've been told they conform better to the standards than does...
|
by: Chris Sharman |
last post by:
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
|
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...
|
by: krsgoss |
last post by:
I'm trying to do a two column "form" layout based on article here:
http://www.alistapart.com/stories/practicalcss/
The idea is to have a label, and a value using definition list markup.
I float the dt left, and the dd right with fixed widths for each. This
works fine in both IE and FF until I have a <br> elements within the dd
elements. ...
| | |
by: hantechs |
last post by:
<html>
<body>
<p style="width:30%;">text1</p>
<p style="float:left;">text2</p>
</body>
</html>
The effect of this html code is : text1 and text2 each is on a line.
My question is: Why text2 is positioned on the right of text1? Because
the CSS2.1 said: A floating element must be placed as high as possible;
A left-floating element must be...
|
by: idealer |
last post by:
I am just transitioning to div based layout and love it so far...
I am having a few quirks with IE that I can use some help with.
SAMPLE: http://arenamotorgroup.com/index_comp.html
In IE this div
<div style="float:left; width:264px; background-color:#383838; margin-left:46px; height:400px;">
|
by: GloStix |
last post by:
WARNING VIDEO TAKES A WHILE TO LOAD
http://screencast.com/t/BWQ6DNtsM
I really don't know how to fix this other than putting another div. But I dont'
exactly want to do that for every page. random div's everywhere
Is there any other way?
Also I'm trying to get a scaled thumbnail of the orginal picture WHILE maintaining the size of...
|
by: smartic |
last post by:
hi i'm having problem with designing css layout i'm not expert so i need any one good in css help me in this page, my problem in this page i need to make menus to be displayed in one line beside each other how can i do that?
<head>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;...
|
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: 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...
|
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...
|
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...
|
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
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
