So I'm relatively new to Html and CSS but I can't work out how to get the logo to stay in a fixed position relative to the wrap.

 

At the moment I have the logo a certain percentage from the left side of the browser but obviously with different resolution screens the logo is going to be in different places.

 

I'm guessing I need a Header container? http://themash.com/blog/entertainment/2012/08/04/ya-author-john-green-connects-with-fans-to-do-good/ At least this website does but I can't work out what they've done to achieve the fixed logo.

 

Thanks

Well I'll explain the structure of the website you provided.

 

Basically, the website's main content is wrapped in a container div that has a width of 100%. Within that container are divs for each major section of the website (header, menu body) with a set width of about 1000 pixels and they're vertically centered. This produces the effect you want to accomplish in that the logo you see is simply aligned to the left side of the 1000 pixel centered div.

 

This is what you call a "fixed layout". Here's an example in case what I've written above is confusing.

 

<div id="Container" style="width: 100%">
<div id="Header" style="margin-left: auto; margin-right: auto; width: 1000px; height: 100px;">
 <div id="Logo" style="float: left;"></div>
</div>
<div id="Menu" style="margin-left: auto; margin-right: auto; width: 1000px;"></div>
...
</div>

Edited August 5, 201214 yr by Pete Prosper

Ahhh. Perfect, Thank you. This worked fine

snip

 

Good post. +1'd