8 replies [Last post]
dorobo
dorobo's picture
Offline
Regular
Last seen: 19 years 49 weeks ago
Timezone: GMT-5
Joined: 2003-04-22
Posts: 21
Points: 0

Was wondering if it was normal ( aka part of the Specifications ) for left margins and padding adjacent to left floating element to collapse as in -> http://digitalmilitia.net/testcases/veronique/

rule is located @ common.css

#right_content {
...
padding: 10px;
}

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 19 years 20 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Collapsing left margins and paddings

hmmm not too sure what you are saying. Do not always know all the lingo.

Are you trying to put the right hand div up next to the left hand div and -

-if so you will have to reduce its width and float it left
-if not you should probably move the clear all div up after the left div

Also when Looking at the Page - I am getting some strange scrolling problem when I scroll down, but can't scroll all the way back up.

Regards
Day

The only way to learn is to do it yourself

dorobo
dorobo's picture
Offline
Regular
Last seen: 19 years 49 weeks ago
Timezone: GMT-5
Joined: 2003-04-22
Posts: 21
Points: 0

Collapsing left margins and paddings

what I want to do:

padding to the left of the #right_panel, meaning spacing the text from the picture. Looks like any margin and/or padding collapses because of the float.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 19 years 20 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Collapsing left margins and paddings

I am still not sure what you are saying because, I am looking at this in IE6 and the text looks like it is correctly positioned from the left hand side of its block.

But you have different positioning for the Welcome div and the News div.

1) the div id="welcome" class="section">, is not defined in the CSS, and therefore is positioned based on the Content div.

2) the news div is defined in css, and therefore new padding is added.

3) I can not see why you are getting a gap between the block containing the image and the block containing the text. But see 4 and 5 below

4) I have never used this type of structure. If I have floated a block to the left I will then normally float the next block up next to it. In this case the following block has moved up anyway without floating.

5) You have not used positioning (poisition: relative;) and that may cause something strange to happen.

Hope that helps

Day

The only way to learn is to do it yourself

dorobo
dorobo's picture
Offline
Regular
Last seen: 19 years 49 weeks ago
Timezone: GMT-5
Joined: 2003-04-22
Posts: 21
Points: 0

Collapsing left margins and paddings

the problem with floating the block next to it is that the div it won't be filling the page horizontally and act as an inline element

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 19 years 20 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Collapsing left margins and paddings

So am guessing that the problem is the gap then between the 2 blocks??

if so try defining a margin of 0px for both, just in case there is some default inheritance occurring.

Day

The only way to learn is to do it yourself

dorobo
dorobo's picture
Offline
Regular
Last seen: 19 years 49 weeks ago
Timezone: GMT-5
Joined: 2003-04-22
Posts: 21
Points: 0

Collapsing left margins and paddings

well, i updated the current page, thats why the problem i was referring to no longer exists ( pretty uncanny if you ask me as I still have a floating div ).

And the problem occured only in standard compliant browsers ( mozilla/safari/ie mac ) Wink

Thks for your time

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 19 years 20 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Collapsing left margins and paddings

No problem - although my wife was wondering why I kept on looking at such a good looking women.

ummm btw I can not see any difference, so not sure what you updated.

Regards
Day

Edited - problem occurred only in compliant browsers - did not read it properly. hmmm better go and get a compliant browser.

The only way to learn is to do it yourself

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 11 years 43 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Collapsing left margins and paddings

Quote:

Was wondering if it was normal ( aka part of the Specifications ) for left margins and padding adjacent to left floating element to collapse as in

I didn't see your first example but this explanation may help Smile

A float is basically removed from the flow so following elements except other floats will not be able to be positioned from the float.

When an element is floated the surrounding content is allowed to flow around the float and this is achieved by the (automatic) adding of padding to the surrounding element. However any borders or background elements will actually still go behind the float. When you try to set a margin or padding on a following element you are actually setting it from the windows edge (as if the float wasn't there).

Try this code below and change the margin left property in the test class to see the effect. Once you have entered a margin wider than the float then the element starts to move away.

Also notice that IE6 displays it incorectly and that Mozilla behaves as per the specs. If you set the margin-left in the class test to zero them mozilla will hide all the background behind the float but place the text underneath. IE6 on the otherhand will place the class text to the side of the float which is actualy incorrect.

However once the margin-left is greater than the size of the float both browers display the same.

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.float {float:left;width:200px;height:200px;background:red}
.test {width:200px;height:200px;margin-left:100px;background:blue}
</style>

</head>

<body>
<div class="float">float</div>
<div class="test">Content</div>
</body>
</html>

Hope that makes it a little clearer.

Paul