CSS layout help please

[gwmbox]

Hi guys

This one has got me - the answer is probably staring right at me...

I have attached an image representing the basics;

It basically has a top, middle and bottom with also an image that we have in the far right bottom. The content area however overlaps the top and bottom parts. But I need the content area to be centered on the page and it's height to be the height of the browser or the page height (if taller than the browser height) and remain only 45 px's overlapped both top and bottom. It should fully expand the height to the full height.

I hope I make sense what I have been playing with so far is

/*-----------------------------------------------------------------------------
 Page Layout and Background Styles
-----------------------------------------------------------------------------*/

#page-wrapper {
	width: 100%;
	border: 1px solid red;
	margin: 0 auto;
	text-align: center;
}

#page-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-image: url(../images/pg-top.jpg);
	height: 150px;
	padding: 0;
	margin: 0;
	z-index: 1;
	border: 1px solid red;
}

#page-mid {
	position: relative;
	width: 900px;
	top: 105px;
	bottom: 105px;
	padding: 0;
	margin: 0;
	background-color: white;
	text-align: left;
	z-index: 2;
	border: 1px solid red;
}

#page-bottom {
	position:absolute;
	width:100%;
	height: 150px;
	padding: 0;
	margin: 0;
	left: 0px;
	bottom: 0px;
	background: url(../images/pg-bottom.jpg) repeat-x left;
	z-index: 0;
	border: 1px solid red;
}

#page-shell {
	position: absolute;
	width: 503px;
	height: 412px;
	padding: 0;
	margin: 0;
	bottom: 0px;
	right: 0px;
	background: url(../images/largeshell.jpg) no-repeat bottom right;
	z-index: 0;
	border: 1px solid red;
}

The borders are they just to see if it is being layed out correctly

the HTML

<div id="page-wrapper">
<div id="page-top"><img src="includes/images/null.gif" width="1" height="1" alt="the header"></div>
<div id="page-mid">The content area</div>
<div id="page-bottom"><img src="includes/images/null.gif" width="1" height="1" alt="the footer"></div>
<div id="page-shell"><img src="includes/images/null.gif" width="1" height="1" alt="an image for bottom right"></div>
</div>

Hope I make sense and you can help

Cheers

[Medyman]

Are you saying that your markup works except for the overlapping bit? In my testing, it looks like a total mess. What browser are you using?

In any case, going by what you describe, I think that you want something like this. Just hit view source to see how it's done. Notice the "back to top" icon at the bottom right.

Tested in all major PC browsers -- IE6, IE7, Fx2, Safari, Opera

[gwmbox]

Thanks for that, yes mine got a bit messy - I think because I was trying to do too much when a more simple solution which you provided was better.

Thanks

[Medyman]

Thanks for that, yes mine got a bit messy - I think because I was trying to do too much when a more simple solution which you provided was better.

One thing though is that the height is longer than the page, i.e. the content is set to 100% so there is a need to scroll down to the bottom of the page, is there a way that if the content is not longer than the browser window it does not require scrolling down? However it does fill the whole browser window?

Thanks

If I'm understanding you correctly, no, that's not possible.

You can any of the following:
1) Set a minimum height for the content. If the content is greater than the specified minimum height, the content area will grow.

2) Set a maximum height for the content. The content area will be only as large as the content within it. If the content exceeds the specified the maximum height, it will follow whatever overflow rules are set.

3) Set an absolute height (as in my example). The content area will be at the absolute height. If the content exceeds the specified height, it will follow whatever overflow rules are set.


What you're asking to do is to dynamically calculate the height of the viewport, subtract the height of the header and footer (less 45 pixels), and then set the height of the content area. That kind of calculation can be done with javascript but not CSS.

[gwmbox]

Thanks I have set that now and have it working the way I wanted it using what you gave me.

One more question if I may on another style issue;

If I have a page 75% wide, but have within that two boxes 50% wide (same size split across) but with a gap (margin) between them of say 4px how do I get them not to wrap in Firefox? I tried setting them to 49%, which with a large sized window it will work but resizing down it does not - Is the only solution to set the widths with exact px's? Trying to allow a fluid layout.

Thanks

[Medyman]

If I have a page 75% wide, but have within that two boxes 50% wide (same size split across) but with a gap (margin) between them of say 4px how do I get them not to wrap in Firefox? I tried setting them to 49%, which with a large sized window it will work but resizing down it does not - Is the only solution to set the widths with exact px's? Trying to allow a fluid layout.

You could either set the width in pixels or use a smaller percentage. Depending on the width of the container, the 1% you leave to be the "margin" might be smaller than the 4px.

So, the solutions are:
1) to set a minimum width to the container so that 1% of it's width will always be above 4 pixels
2) give everything absolute widths
3) give the margin a fluid width (i.e. 1%)
4) mimic the "margin" with a div and set a width of 1% and max-width of 4px (this could be done if you want the fluid width but don't want it any larger than 4px).
5) reduce the widths of the "boxes"

[boogyman]

Thanks I have set that now and have it working the way I wanted it using what you gave me.

One more question if I may on another style issue;

If I have a page 75% wide, but have within that two boxes 50% wide (same size split across) but with a gap (margin) between them of say 4px how do I get them not to wrap in Firefox? I tried setting them to 49%, which with a large sized window it will work but resizing down it does not - Is the only solution to set the widths with exact px's? Trying to allow a fluid layout.

Thanks

IE6 requires at least a 5% "gutter" or it will wrap.

try setting the boxes to 45% each and center them within the outter container

<div id="wrapper">
     <div class="boxLeft">Something</div>
     <div class="boxRight">Something Else</div>
</div>

div#wrapper {
     width: 75%;
}
div.boxLeft {
     clear: both;
     float: left;
     margin: 0 auto;
     width: 45%;
     padding: 0; /* reset default padding which can also cause wrapping */
}
div.boxRight {
     float: right;
     margin: 0 auto;
     width: 45%;
     padding: 0;
}

clear:both; - provided that the left side is what you declare first for every new "box"

that will give you a 5% gutter on all sides, and the middle a 10% in firefox and about an 7-8% gutter in IE6 and below

[gwmbox]

Thanks to both of you all sweet now - really do appreciate it.

Cheers