Jump to content
Stef's Coding Community
Sign in to follow this  
Ant

Dealing with collapsing margins/padding

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by Ant

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...