homepage Welcome to WebmasterWorld Guest from 54.237.54.83
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Fancy a shot at explaining this one?
aspr1n




msg:1206643
 4:18 pm on May 10, 2003 (gmt 0)

I don't get this.... a div (div1)defined as float:left, which is supposed to remove it from the page flow, yet the top:margin applied to div2 affects div1's margin as well, IE6 doesn't even remove div1 from any page flow, so I'm at a loss to expalin this one at all.

Cheers,

asp

<html>
<head>
<style type="text/css">
body{
padding: 0px;
}
.div1{
background-color: #CCCCCC;
width: 300px;
height: 50px;
float: left;
}
.div2{
background-color: #999999;
width: 400px;
height: 300px;
margin-left: 30px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

 

DrDoc




msg:1206644
 4:45 pm on May 10, 2003 (gmt 0)

Well, technically floating doesn't remove an element from the page flow. It just changes its behavior.

div2 should wrap around div1 (well, as long as you have content in either one of them)... Try adding some random text and see what it looks like.

Another approach is to let div1 reside inside div2.

+----------+--------+ 
¦иииDIV1иии¦ииDIV2ии¦
+----------+ииииииии¦
¦иииииииииииииииииии¦
¦иииDIV2ииииииииииии¦
+-------------------+

aspr1n




msg:1206645
 4:56 pm on May 10, 2003 (gmt 0)

technically floating doesn't remove an element from the page flow

ok... I always thought that was the point of float?

As for wrapping around, why would div1 take a margin applied to div2 when it's not a child?

Adding in text, for me in Phoenix display as if div1 was a child of div2. Amazingly Opera 6 & Dreamweaver! are the only two displaying as I would have expected!

This was me playing as a prelude to moving to the layout below:


+-----------------+
дииииииииииииииииид
+----------+ииииииид
диииDIV1ииидииииииид
+----------+ииииииид
дииииииииииииииииид
дииииииииииииииииид
диииDIV2иииииииииид
+-----------------+

Cheers,

asp

aspr1n




msg:1206646
 5:06 pm on May 10, 2003 (gmt 0)

From W3C - Precise rules that govern the behavior of floats:
1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
2. If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
4. A floating box's outer top may not be higher than the top of its containing block.
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

My senario would appear to be in direct violation of points 5,6 & 8 as div1 is the first element in the source.

asp

DrDoc




msg:1206647
 5:10 pm on May 10, 2003 (gmt 0)

Well, I just tested it in IE6, and it works like it should ... the left div (div1) is located about 30px above the right div (div2) because of the top margin...

Is that all the code you have on the page?

aspr1n




msg:1206648
 5:24 pm on May 10, 2003 (gmt 0)

Yeah other than doctype declarations etc. Interesting, my version of IE6 hasn't got the vaguest idea of what's going on ;)

entire code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{
padding: 0px;
}
.div1{
background-color: #CCCCCC;
width: 300px;
height: 50px;
float: left;
}
.div2{
background-color: #999999;
width: 400px;
height: 300px;
margin-left: 30px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

Cheers,

asp

DrDoc




msg:1206649
 5:54 pm on May 10, 2003 (gmt 0)

Yep, that code works as well :)

aspr1n




msg:1206650
 6:03 pm on May 10, 2003 (gmt 0)

hmmm, bloody IE - I'm beginning to take this personally ;)

IE version: 6.0.2800.1106.xpsp2.021108-1929CO

Nice to see such intelligent naming conventions!

Cheers Dr

asp

DrDoc




msg:1206651
 6:08 pm on May 10, 2003 (gmt 0)

6.0.2800.1106

Same one I have... So, shouldn't be that :)

jeremy




msg:1206652
 11:02 pm on May 10, 2003 (gmt 0)

IE 6 will go into quirks mode with

<?xml version="1.0" encoding="iso-8859-1"?>

as the first line. Try deleting it and see what happens.

DrDoc




msg:1206653
 4:23 am on May 11, 2003 (gmt 0)

Well, it works for me - with or without the XML declaration, with or without a doctype - so, the problem is something else

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved