Jump to content
dre548

fixed header, keep the entire page centered for big displays

Recommended Posts

So I'm a newb coder, just learned CSS in order to build a site for the music venue I work at. I got everything how I want it, I just can't get the entire page to center as the window enlarges, on bigger displays.

 

I've got everything in a div id="mainbox", thinking that would then be able to be centered. But my fixed header always stays to the left side of the screen. I gave up and just left everything left justified, but it's been bugging me and I think would be an improvement to the site.

 

http://thedelancey.com

 

I'm open to suggestions and looking for advice. This site provided a lot of help when googling CSS questions, so I thought I'd join and ask one myself.

 

Cheers,

Andre

Share this post


Link to post
Share on other sites

Generally you use margin: 0 auto to center block elements and text-align: center to center inline elements... but that doesn't work for fixed or absolute positioned elements.

 

As a guideline you should usually try to avoid the use of positioning unless you really need it. In your case you really needed fixed divs so you should be able to package the content in your fixed divs inside inner static divs and then apply margin:0 auto to these inner static divs.

<div style="position:fixed;top 0;border:1px dotted blue;height:100px;width:100%;">fixed  <div style="margin:0 auto;background-color:pink;height:40px;width:300px;">  static  </div></div>

Share this post


Link to post
Share on other sites

Also don't use margins or padding for those elements you wish to fit the whole screen with 100% width, these cause a addition to 100% width resulting in scrollbars appearing. If you use right:0; property instead of width: 100%; it will stretch to width available to it after taken in account any margins or padding used.

Share this post


Link to post
Share on other sites

everything sits inside the "mainbox" div. I switched it to the following:

 

#mainbox {
position: static;
width: 100%;
height: 100%;
margin: auto;
z-index: 1;
}
I also tried removing the position and the margin and did "right: 0;" which also didnt' work...
No matter what I do, it's still stuck on the left side of the screen and won't center the entire static div, which holds the fixed div's inside of it.
Still looking for advice...
Edited by dre548

Share this post


Link to post
Share on other sites

 

everything sits inside the "mainbox" div.

 

What you probably need to do is create three divs -- a fixed header, a static content, and a fixed footer. Then create inner static divs inside header and footer. Apply margin: 0 auto and a width to all of the static divs.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>*{margin:0;padding:0}</style></head><body><div style="position:fixed;top:0;border:1px dotted blue;height:100px;width:100%;">  <div style="margin:0 auto;background-color:yellow;height:98px;width:600px;">  header  </div></div><div style="margin:100px auto 0 auto;background-color:orange;height:500px;width:600px;">content</div><div style="position:fixed;bottom:0;border:1px dotted blue;height:50px;width:100%;">  <div style="margin:0 auto;background-color:green;height:48px;width:600px;">  footer  </div></div></body>    </html>

Share this post


Link to post
Share on other sites

The fixed position element may sit within mainbox, but this makes no difference, position: fixed; means it is totally taken out of the flow from all elements within a page, it position is determined by the outer edges of browser window, unlike position absolute element whose position is determined by a closest parent element using position: relative; if no such parent element exist, then it s position is determined by browser window edges.

 

Davej suggestion is the way to do it, but i have to point out that using width:100%; with 1px border, results in the border disappearing at the right edge, because total width equals exact total width of browser window + 2px, using right:0; would cause it only take up the total width available to it after border added.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...