Wow I really wasn’t sure what to put in the title field, it probably doesn’t make any sense.
Let me explain, I am building a site with a fixed header and footer. Now I don’t want my site to be 100% wide but I still want it to be nice and responsive so it fits on smaller screens. After a bit of research I have found that most people use something like this:
#header {
position: fixed;
top: 0;
left: 50%;
width: 1200px;
margin-left: -600px;
}
I mean this works well and all but to get it responsive I would have to use media queries to catch screens smaller than1200px. So while I was playing around I found that this seems like a far better solution:
#container {
max-width: 1200px;
position: relative;
margin: 0 auto;
}
#header {
position: fixed;
top: 0;
width: 1200px;
max-width: 100%;
}
Is there any obvious reasons as to why it would be a bad idea to have the left value on the header to be set to auto? This way it sits nicely in the center but will still adapt to to the browser window on smaller screens (max-width:100%), leaving out those nasty scrollbars. And without having to use media queries.
What are your thoughts on this? To me it seems like a great solution but I might be missing something…
