Dealing with collapsing margins/padding

[Ant]

What are some of the ways that I can tell a div or tag to ignore the collapse margins rule?

 

I assume margins and padding both collapse and are the same with respect to the rule.

 

Say I have the following. How do I control the top and bottom margins on the content 1 and content 2 headings and make them be 15px and 20px without collapsing?

 

<div style="padding:15px 0px 20px 0px;"><h2 >content 1</h2></div>

 

<div style="float: left; width: 450px; height: 325px;">content</div>

<div style="float: left; width: 450px; height: 325px;">content</div>

 

<div style="padding:15px 0px 20px 0px;"><h2 >content 1</h2></div>

<div style="float: left; width: 450px; height: 325px;">content</div>

<div style="float: left; width: 450px; height: 325px;">content</div>

[falkencreative]

Maybe I'm missing something... but my impression is that collapsing margins refers to when two elements with margins are positioned next to each other, where their top/bottom margins will touch. In that case, the larger or the two margin is used, and the smaller of the two is ignored. I don't believe that padding collapses.

 

In your code above, I'm not seeing anything that would indicate that there is any collapsed margins going on? Perhaps you mean something else?

 

 

 

EDIT: This link may help describe collapsing margins: http://www.howtocreate.co.uk/tutorials/css/margincollapsing

[falkencreative]

Also, this article discusses this in more detail: http://css.flepstudio.org/en/css-box-model/box-model-margin-collapse.html

 

It indicates that elements that are floated or cleared won't have collapsed margins.

[Ant]

Ben as a test I just added this and nothing increased on the top padding BUT the bottom padding works:(<div style="padding:445px 0px 445px 0px;"><h2 >content 1</h2></div>)

 

 

<div style="padding:15px 0px 20px 0px;"><h2 >content 1</h2></div>

 

<div style="float: left; width: 450px; height: 325px;">content</div>

<div style="float: left; width: 450px; height: 325px;">content</div>

 

<div style="padding:445px 0px 445px 0px;"><h2 >content 1</h2></div>

<div style="float: left; width: 450px; height: 325px;">content</div>

<div style="float: left; width: 450px; height: 325px;">content</div>

 

Now I am using Wordpress themes so maybe somewhere in the theme something is overriding the padding like a css reset but I don't believe so.

 

SO I assumed it was the collapse rule.

 

A.

[falkencreative]

Something else is going on, since the collapse issue only deals with margins.

 

You may get some weird issues with your code though, since the middle div isn't floated, but the rest are. Are you doing that purposely?

[Ant]

I just didn't float the middle div (or the first div)because it's an aligned left headline(by default) above the floated divs.

 

What I am doing is using the divs to contain youtube videos. The headline above denotes the type of videos.

 

so it's:

 

HEADLINE

VIDEO VIDEO

 

VIDEO VIDEO

 

HEADLINE

VIDEO VIDEO

 

VIDEO VIDEO

 

etc

 

A.

[Ant]

Ben I added this and for some reason it's working. I guess you were right when you said "You may get some weird issues with your code though, since the middle div isn't floated, but the rest are."

 

<div style="float:left; padding:15px 0px 20px 0px;"><h2 >Content 1</h2></div>

 

<div style="clear:left; float: left; width: 450px; height: 325px;">content</div>

<div style="float: left; width: 450px; height: 325px;">content</div>

 

<div style="float:left; padding:15px 0px 20px 0px;"><h2 >Content 2</h2></div>

 

<div style="clear:left; float: left; width: 450px; height: 325px;">content</div>

<div style="float: left; width: 450px; height: 325px;">content</div>

[falkencreative]

Glad to hear you got it fixed. I know I usually have trouble mixing separate divs where some are floated and some aren't -- the non-floated divs often end up in a place where I didn't expect them to.

 

One question: if I understand your "HEADLINE", "VIDEO" etc. comments above, do you really need to float the elements at all? Based on your rough text based diagram, I'm not seeing any reason for them to have floats -- no divs are horizontally next to each other, and they all follow one after another down the page, right?

[Ant]

Ben, the videos are setup in 2 columns. Since I was told here it's best to use divs instead of tables I chose the float left div style to line up videos horizontally next to each other.

 

So instead of each type of video having a table with 2 columns and X amount of rows(depending on the amount of videos in each category) I used the float left divs.

 

So yes they are next to each other.

 

Like this:

 

 

HEADLINE

 

VIDEO 1 VIDEO 2

VIDEO 3 VIDEO 4

VIDEO 5 VIDEO 6

ETC....

 

 

 

 

A.

Edited May 14, 2012 by Ant

[falkencreative]

OK, got it. Guess I just misunderstood your original diagram. In that case, yes, you will need floats to have multiple elements next to each other.