css - Logo Moves All Over The Place When Resize Windows -



css - Logo Moves All Over The Place When Resize Windows -

okay have problem website working on.. infact have problem alot , never asked help, think it's time now. here css:

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

when resize window logo in header go in right when window resized. have tried position absolute, relative etc same thing. ideas please guys?

here html:

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

here links pictures representing problem:

this working alligned:

and

this starts go on place:

any ideas? please

set width on header element. it's defaulting width: auto; spanning 100% of browser window. thus, when re-size window's width, header element re-sized moving contents.

update 1

you're using margin position logo 280px left side of browser window, when resize window's width, logo moving too- logo beingness 'pushed'. want wrap in container div , set margin spacing relative that, not 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/

css header

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -