dre548 Posted December 2, 2014 Share Posted December 2, 2014 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 Link to comment Share on other sites More sharing options...
davej Posted December 3, 2014 Share Posted December 3, 2014 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 3, 2014 Share Posted December 3, 2014 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. Link to comment Share on other sites More sharing options...
dre548 Posted December 4, 2014 Author Share Posted December 4, 2014 (edited) 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 December 4, 2014 by dre548 Link to comment Share on other sites More sharing options...
davej Posted December 4, 2014 Share Posted December 4, 2014 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 5, 2014 Share Posted December 5, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now