grid-like site header, creating pixel perfect arrangement - html

Question

jsfiddle
I'm trying to create a blog header that is best described as a grid format. Each item will have a specified position- top, bottom, left, right- with a border on each of it's sides. I've got the basic layout down, but finessing it into a pixel perfect grid is a bit beyond my reach. I've attached an image of what it should look like in the end. Below is the code.. what am I missing?
html-
<div id="blog-header">
<span class="blog-logo"><img src="http://placehold.it/262x134" alt="logo" /></span><!-- end blog-logo -->
<div class="mid">
<p class="blurb">Hi, this is a brief bio.<br/>Ok that's it!</p><!-- end blurb -->
<div class="blog-social">
<ul>
<li><img src="http://placehold.it/25x25" alt="facebook" /></li>
<li><img src="http://placehold.it/25x25" alt="twitter" /></li>
<li><img src="http://placehold.it/25x25" alt="instagram" /></li>
<li><img src="http://placehold.it/25x25" alt="pinterest" /></li>
</ul>
</div><!-- end blog-social -->
</div><!-- end mid -->
<div class="right">
<p class="blog-nav">PORTFOLIO<span style="padding: 0 5px 0 5px;">|</span>BLOG<span style="padding: 0 5px 0 5px;">|</span>ABOUT<span style="padding: 0 5px 0 5px;">|</span>CONTACT</p>
<div class="email">
<img src="http://placehold.it/350x50">
</div><!-- end email -->
</div><!-- end right -->
</div><!-- end blog-header -->
css-
#blog-header {
height: 124px;
width: inherit;
margin: 0 auto;
}
#blog-header .mid,
#blog-header .blog-logo {
border-right: 2px solid #333333;
float: left;
}
#blog-header .mid {
padding-left: 15px;
width: 230px;
}
#blog-header .right {
padding-left: 15px;
float: right;
}
#blog-header .blog-logo {
padding-right: 15px;
width: 262px;
}
#blog-header .blurb {
border-bottom: 2px solid #333333;
padding-bottom: 15px;
font-family: Alexandria;
font-size: 80%;
text-align: center;
width: 200px;
}
#blog-header .blog-social {
clear: both;
width: 125px;
margin: 0 auto;
padding: 10px 0 10px 0;
}
#blog-header .blog-nav {
padding: 7px 0 15px 0;
width: 350px;
}
#blog-header .email {
border-top: 2px solid #333333;
padding-top: 17px;
width: 350px;
}

Answer 1

First, try not to style tags in your HTML with id tags. In fact, if at all possible, try not to style with classes either, unless you need to. You should Google CSS Selectors and try to use as many of those to style your HTML.
Since the only image you are using is the big none on the left, you don't need to put a span around it. Just float: left the image.
Also, are you using HTML5? If so, then #blog-header should instead be a tag. If you have more than one header in your document, then you could give it a class to differentiate it if you needed to.
You also don't need a div around your unordered list of social icons. Just float the list, and display:inline the icons. And instead of using images as icons, you should Google Icon Fonts.
There's a lot more, but start there and get back to us once you've made those changes. Just remember, when it comes to HTML and CSS, less is more!

Answer 2

Kindly post us the part where you are stuck at, not the whole css, what you exactly want, then we can help. It's pointless when you make %90 of whole project and ask us to re-write the project as a whole so we can fix your bugs.
By the way, the codes seem to be too long for such a banner. I removed half of your css and they worked exactly same. Either you took these from somewhere or you don't have any methodolody in learning curve.
I recommend you to take professional developing courses which might help you building clear codes.