CSS - Placing an Image over a Header

Hi Folks,

I have a H2 Header with a 3px Border at the bottom that stretches the full width of the page.  On the right-hand side I'm trying to place 6 small transparent images.  The positioning of these is fine at the moment, however the H2 border is being cut off (see image attached).  I've tried increasing the bottom-margin of the images, without success.

I've attached my CSS & HTML Code below (or rather, snippets of).

At this point, I'm slightly at a loss of which direction to take, so any pointers much appreciated!

 
/* CSS */

article .article-container {
	display:block;
	overflow:hidden;
}
article header {
	height:27px;
	border-bottom:3px solid;
	padding-bottom:8px;
	margin-bottom:20px;
}
article header h2 {
	font-size:167%;
	float:left;
}
article header nav { float:right; }

.social { border:none; }

/* HTML */

<div class="article-container">
<header>
<h2>H2 Header</h2>
					
<nav>
<a href=""><img src="/img/social/email.png" class="social" rel="tooltip" title="Email to a Friend"></a>
<a href=""><img src="/img/social/rss.png" class="social" rel="tooltip" title="RSS Feed"></a>
<a href=""><img src="/img/social/twitter.png" class="social" rel="tooltip" title="Tweet This"></a>
<a href=""><img src="/img/social/facebook.png" class="social" rel="tooltip" title="Post to Facebook"></a>
<a href=""><img src="/img/social/google.png" class="social" rel="tooltip" title="Post to Google+"></a>
<a href=""><img src="/img/social/delicious.png" class="social" rel="tooltip" title="Bookmark with Delicious"></a>
</nav>
</header>
</div>

Open in new window

Screenshot
RedBullLeeAsked:
Who is Participating?
 
SSupremeConnect With a Mentor Commented:
Try this:
<html>
<head>
<style type="text/css">
article .article-container {
	display:block;
	overflow:hidden;
}
article header {
	height:27px;
	border-bottom:3px solid;
	padding-bottom:8px;
	margin-bottom:20px;
}
article header h2 {
	font-size:167%;
	float:left;
}
article header nav { float:right; }

.social { border:none; }
header, h2, nav {margin:0;padding:0;}
header {width:900px;border-bottom:3px solid grey; overflow:hidden;}
h2 {width:500px; float:left;}
nav {width:200px;float:right;}
</style>
</head>

<body>


<div class="article-container">
<header>
<h2>H2 Header</h2>
					
<nav>
<a href=""><img src="/img/social/email.png" class="social" rel="tooltip" title="Email to a Friend"></a>
<a href=""><img src="/img/social/rss.png" class="social" rel="tooltip" title="RSS Feed"></a>
<a href=""><img src="/img/social/twitter.png" class="social" rel="tooltip" title="Tweet This"></a>
<a href=""><img src="/img/social/facebook.png" class="social" rel="tooltip" title="Post to Facebook"></a>
<a href=""><img src="/img/social/google.png" class="social" rel="tooltip" title="Post to Google+"></a>
<a href=""><img src="/img/social/delicious.png" class="social" rel="tooltip" title="Bookmark with Delicious"></a>
</nav>
</header>
</div>
</body>

</html>

Open in new window

0
 
RedBullLeeAuthor Commented:
Thanks, SSupreme,

I've just had a play around with that and it works perfectly simply by adding;

header {overflow:hidden;}

Thanks for your help, much appreciated!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.