Question

Okay so I have a problem with a website I am working on.. infact I have this problem alot and never asked for help, I think it’s time now. Here is my CSS:

    header {
    background: #EEEEEE;
    height: 50px;
    }
    .logo {
    background: url(logo.png);
    width: 200px;
    height: 40px;
    margin: 0 280px;
    }

When I resize my window the logo in the Header will go in to the right when the window is resized. I have tried position absolute, relative etc but it does the same thing. Any ideas please guys?

Here is my HTML:

<header>

<div class="logo"></div>

</header>

Here are links to pictures representing the problem:

This is where everything is working perfectly everything is alligned:

FullSizedWindow http://dl.dropbox.com/u/6212750/Full%20Sized%20Window.png

and

This is where everything starts to go all over the place:

WhenWindowIsRised http://dl.dropbox.com/u/6212750/When%20window%20is%20resized.png

Any ideas? Please

Answer 1

Set a width on the header element. It’s defaulting to width: auto; which is spanning 100% of the browser window. Thus, when you re-size the window’s width, the header element is re-sized too moving the contents.

Update 1

You’re using a margin to position the logo 280px from the left side of the browser window, so when you resize the window’s width, your logo is moving too- the logo is being ‘pushed’. What you want to do is wrap everything in a container div and set your margin spacing relative to that, not the browser window.

HTML

<div id="container">
    <header>

    <div class="logo"></div>

    </header>
</div>

CSS

#container {
    width: 400px;
    margin: 0 auto;
}
header {     
    background: #EEEEEE;    
} 
.logo {     
    background: url(http://i.imgur.com/4hs7p.png) no-repeat top left;    
    width: 200px;     
    height: 198px;     
    margin: 0;    
}

fiddle: http://jsfiddle.net/alpacalips/ybe9d/2/