The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help with code, margin
Aush
post Dec 14 2011, 09:34 PM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 8-February 10
Member No.: 11,027
I just started a new website...

I have a div inside of a div, 'cen' inside of 'tu', but when I try to add a top margin to cen, instead of adding the margin from the top of 'tu', it adds a margin from the bottom of 'top'.

I can fix this by adding padding to 'tu' and and reducing its height, but I want to know why the problem exists, as I'm trying to learn. Thanks a lot...

Here's the code:

<!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>Austin</title>

<style type="text/css">

html, body, h1, h2, h3, img, p, ul, li {
margin: 0;
padding: 0;
}

.top {
height: 100px;
width: 100%;
background-color: #0F272B
}

.tu {
height: 350px;
width: 100%;
background-color: #37648D;
}

.cen {
margin-top: 50px;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 250px;
background-color: #91CED9;
}

</style>

</head>

<body>

<div class="top">

<h1>Austin</h1>

</div>

<div class="tu">

<div class="cen">

<h2>This is the website</h2>

</div>

</div>

</body>

</html>

Here's a pic of the issue:

IPB Image

Thanks a lot!

This post has been edited by Aush: Dec 14 2011, 09:34 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 15 2011, 01:22 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
It happens because of collapsing adjacent vertical margins.
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

The padding removes the adjacency.
margins are adjoining if and only if:
* no line boxes, no clearance, no padding and no border separate them

What is a little hard to understand is that not only margins of boxes that are one after the other can collapse, but also margins of nested boxes and if that happens the common margin shows up outside the outmost of the involved boxes.

I think the below is supposed to describe that, but I'm not sure if I think it's that clear... unsure.gif
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Aush
post Dec 15 2011, 02:46 AM
Post #3


Novice
**

Group: Members
Posts: 25
Joined: 8-February 10
Member No.: 11,027
Thank you so, so much..

I've been scratching my head over this for days..

I spent about an hour scanning the code (and there's barely any there), and I couldn't figure out what was wrong. wacko.gif

Thanks again 8)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 15 2011, 03:35 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You are welcome. This can sometimes be incredibly tricky to follow if there are many nested boxes, for example nested lists.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Aush
post Dec 15 2011, 07:08 PM
Post #5


Novice
**

Group: Members
Posts: 25
Joined: 8-February 10
Member No.: 11,027
Yeah, after posting, I was messing around with the h2 in the nested box, and I encountered the same problem.. lol

I'm wondering why I've never encountered this before.. I've messed around with sites for awhile, and this has never been a problem.

It may be because I usually use padding for these situations, and I decided to try margin instead. Either way, it's avoidable with a little work. smile.gif

This post has been edited by Aush: Dec 15 2011, 07:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Aush
post Jan 1 2012, 12:29 AM
Post #6


Novice
**

Group: Members
Posts: 25
Joined: 8-February 10
Member No.: 11,027
One question that's been bothering me..

It says that two margins are adjoining if:

bottom margin of box and top margin of its next in-flow following sibling

-

I don't understand this at all. How would the bottom of a div and the top of a div after it, join margins? Like one on top of the other.. that doesn't make sense to me..

Is that what this means, or am I deciphering it incorrectly?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 1 2012, 03:33 AM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Here's an article that explains collapsing margins:
http://complexspiral.com/publications/uncollapsing-margins/

Here's where they are described in the CSS 2.1 spec:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 1 2012, 09:12 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
That's the simple case. It's probably just the wording that confuses you. Two boxes after each other in the HTML and on the page. Like so.

CODE
p    { margin: 15px 0 }


CODE
<p>
First paragraph</p>
<p>
Second paragraph</p>


There will be 15px margin between the paragraphs, not 30px. The bottom margin of the first P collapses with the top margin of the second.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Aush
post Jan 1 2012, 06:33 PM
Post #9


Novice
**

Group: Members
Posts: 25
Joined: 8-February 10
Member No.: 11,027
Thanks, guys. That helps a lot. smile.gif

Wondering though, it doesn't have to be the same element, does it? Like the example you showed, Pandy, it doesn't have to be 2 of the same (paragraphs in this case), right? It could be an h3 and a paragraph, or whatever?

Thanks so much for the help, guys! ^.^
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 1 2012, 06:53 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Nuh, anything goes. And it doesn't need to be just two, it can be more than that if the margins are on the same side of nested elements. That's when it gets really hairy. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 1 2012, 08:03 PM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
As an example of what pandy is talking about, consider:
CODE
<h1>Lorem ipsum<h1>
<div class="foo">
<p class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<p>
</div>
The bottom margin of the h1, the top margin of the div.foo, and the top margin of the p.bar can all be adjacent, and can collapse.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Aush
post Jan 8 2012, 03:35 PM
Post #12


Novice
**

Group: Members
Posts: 25
Joined: 8-February 10
Member No.: 11,027
Thanks, Pandy, and thanks for the example, too, Darin! That helps a lot!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:01 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC