TheMightySpud Posted November 24, 2011 Share Posted November 24, 2011 Hi all, I'm hoping someone can help me out as this is driving me more than a little insane. I have an idea for a layout and a 'framework' for a site but I'm having some trouble with the layout part. I've attached 3 images to try and explain what I'm trying to do and what issues I'm having, the first two (1680x1050 & 1024x768) show what I'm trying to acheive. Basically a header and footer which stay fixed with a container block in the middle which stretches to the full length between the header and footer, but I don't want any overlap and I want this container block to scale based on the size of the browser window (hence the two images to illustrate different screen resolutions). Now, I don't want any scrolling on the page, and this is where my issue arises. If you look at the third image (1680x1050_actual) you see that the center block actually overlaps the footer, I know I can use the z-index css value to fix that, however due to what I want to put in the container block this isn't ideal by any means. Ideally I want to have the container block stop at the top of the footer. I'm not sure I've explained properly, but I hope someone can help out. Thanks in advance, TheMightySpud Link to comment Share on other sites More sharing options...
eTianbun Posted November 24, 2011 Share Posted November 24, 2011 Where is the CODE? Link to comment Share on other sites More sharing options...
TheMightySpud Posted November 24, 2011 Author Share Posted November 24, 2011 My bad, CSS @charset "utf-8";/* CSS Document */body {height:100%;margin:0px;font-size:10px;font-family:Arial, Helvetica, sans-serif;background-color: rgba(255, 255, 255, 1.0);}header {position:absolute;top:0px;width:100%;height:30px;background-color: rgba(0, 0, 0, 1.0);display:block;z-index:5;}#pagewrapper {position:absolute;left:0px;right:0px;width:960px;height:100%;margin-left:auto;margin-right:auto;background-color: rgba(255, 255, 255, 1.0);display:block;overflow:hidden;z-index:0;}footer {position:absolute;bottom:0px;width:100%;height:30px;background-color: rgba(0, 0, 0, 1.0);display:block;clear:both;z-index:5;}.container {position:inherit;top:40px;width:940px;min-height:100%;margin-left:10px;margin-right:10px;background-color: rgba(255, 0, 0, 0.5);display:block;z-index:1;} And the HTML <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TheMightySpud Network Hub</title><link rel="stylesheet" type="text/css" href="css/css.css" /></head><body><header></header><section id="pagewrapper"><section class="container"></section></section><footer></footer></body></html> Link to comment Share on other sites More sharing options...
TheMightySpud Posted November 30, 2011 Author Share Posted November 30, 2011 Well I got it figured out using Javascript, so never mind. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.