Pushing h1 away from parent div

HTML & CSS
1

Hey all,

Notice on this site, the h1 tag is pushed away from the surrounding div where it says “Find A Lawyer”:

Lawyer, Lawyers, Attorney, Attorneys, Law, Legal Information - FindLaw

I try to do the same but this is the result I get:

Notice how the h1 tag is pushed up against the div. Now my design is different from theirs. I wanted to make mine more flexible, so I used 4 images, whereas they used 2. By using 4 images, I have a sliding door effect where the rounded corners can adjust to different sizes of inner content. Hence, why I had to use more divs. But as you can see by using 4 divs like this, I cannot get that h1 tag pushed down away from the surrounding div.

Here is the code:


<style>
/* rounded corners*/
.box {
	width: 40em;
	background: url(bottom-left.png) no-repeat left bottom;
}

.box-outer {
	background: url(bottom-right.png) no-repeat right bottom;
	padding-bottom: 5%; /* pushes text above bottom border*/
}

.box-inner {
	background: url(top-left.png) no-repeat left top;
}

.box-repeat {
	background: url(box-repeat.png) repeat-y left top;
}

.box-inner-inner {
	background: url(top-right.png) no-repeat right top;
	color: #fff;
}

.box h1 {
	background-color: red;
}

</style>
</head>

<body>

<div class="box"> <!-- bottom-left.png -->
	<div class="box-outer"> <!-- bottom-right.png -->
		<div class="box-inner"> <!-- top-left.png -->
			<div class="box-inner-inner"> <!-- top-right.png -->
			<h1>News Snippets</h1> 
			<div id="carousel">
				<ul>
					<li><a href="#"><img alt="" src="quinn_final.png" width="500" height="213" /></a><p>
					FLORIDA VOTERS TURN THUMBS DOWN ON GOV. SCOTT,
					QUINNIPIAC UNIVERSITY POLL FINDS;
					VOTERS BACK DRUG TESTS FOR STATE WORKERS ALMOST 4-1...</p>
					</li>
					<li><a href="#"><img alt="" src="report_card_final.png" width="500" height="213" /></a><p>2011 Property and Casualty Insurance
					Report Card
					A state-by-state analysis of regulatory burden...</p>
					</li>
					<li><a href="#"><img alt="" src="oppaga_final.png" width="500" height="213" /></a><p>Breakthrough 48-Hour Ban Repeal Provides
					Public Adjusters With a Significantly Wider
					Business Channel for 2011...</p></li>
				</ul>
			</div>
			</div>
		</div>
	</div>
</div>

I think this has something to do with collapsing margin effect. But not sure how to resolve. Thanks for response.

2

I actually resolved this by giving 1px padding to inner inner div

3

I am answering your post so you know what actually happened. What you experienced is called “margin collapse”. Simply put the vertical ( top/bottom) margin of an element will “merge” the margin of adjacent or containing elements unless some “obstacle” is put between them. lets say you had a div around that h1, which by default has a 1em top and bottom margin… you’d expect that that margin alone will move your h1 down 1em from the top. but instead the whole combo moves. The way the position is being calculated is as if the div had the 1em top margin… that is margin collapse.

There are ways to prevent this:

  1. You already found this one, add padding to the containing element, in the direction of the margin.
  2. Add a border to the containing element, in the direction of the margin.
  3. Float the element

What technique you chose, largely depends on the specific mark up opportunity.

Glad you solved the problem. I hope my little tirade will come in handy for you later.

4

It’s also why I avoid margin unless I HAVE to use it as I’ve already used/needed padding.

… though i was about to take you to task for having so much markup for NOTHING on the page, until I saw this:
<link rel=“stylesheet” type=“text/css” href=“http://www.findlaw.com/resources/www.findlaw.com/css/yui.css” />

YUI… how to make pages ten times harder to code and maintain while tripling the code needed… because that makes things “easier”. RIGHT.