4 colums boxmodel with header and footer

**Nosilence** · 03-04-2013, 04:01 PM

Hello,

i need your help !! I'm near to loose my mind.
Since 1 week i try to create a boxmodel with 4 colums: Left menu fixed width - x% - main box fixed width - x%
Then a header and a foot-part with fixed hight and fixed on page (not moving by scrolling)
I search and search and can't make this "main box" ... this box shoould have the total height between head and feet, even the content not fill all this part (hope u understand what i want to say ?!

) and it should be centered (x%)
Would be great if someone have a good idea ...
Thanks in advance

here the link to my testproject http://www.inno4.com/new/test.html

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Boxmodel test</title>
<style type="text/css">
.html, body{
	background: grey;
	margin: 0;
	padding: 0;
}

#head{
	position: fixed;
	top: 0px;
	background: red;
	width: 100%;
	height: 100px;
	color: white;
	font-size: 30px;
	text-align: center;
}

#left{
	position: fixed;
	background: blue;
	width: 250px;
	height: 100%;
	top: 100px;
	margin-bottom: 30px; /* this part not function */
	color: white;
	font-size: 20px;
	text-align: center;
}

#main{
	top: 100px;
	left: 250px;
	width: 100%;
	height: 100%;
}

#content{
	width: 500px;
	height: 100%;
	top: 100px;
	left: 250px;
	margin: auto; 
	background: white;
	color: black;
	font-size: 24px;
	text-align: center;
}

#foot{
	position: fixed;
	bottom: 0px;
	background: yellow;
	width: 100%;
	height: 30px;
	color: black;
	font-size: 14px;
	text-align: right;
}

</style>
</head>

<body>
	<div id="head">
        <p>This is my header</p>
    </div>
    
    <div id="left">
        <p>This is my menu</p>
    </div>
    
    <div id="main">
    	<div id="content">
            <p>Here should come my content</p>
        </div>
    </div>
    
    <div id="foot">
        <p style="margin: 7px 50px;">this is my footpage</p>
    </div>
    
</body>
</html>

**ajfmrf** · 03-05-2013, 12:39 AM

Hmm, not quite following what you are looking for?

the main box,appears to be the height of the space between the header and footer.

What is it you want to do?

**Nosilence** · 03-05-2013, 07:13 AM

Hello Bud,
Thanks for answering.
The layout like u can see on the Testpage is still ok.
But i want now in the right 'grey' part create a space with white background and fixed width and it will contain my text, pictures, ...
Then the grey background fill just the space equal left and right for diffrent screen sizes.
I was near to get it, but if i had only small content (just 2-3 lines of text) the white 'box' was not fill the full space between head and foot.
I add you here a picture how it should look like

Thanks for help

Click image for larger version.

Name: Layout.jpg
Views: 148
Size: 68.5 KB
ID: 4964

**Beverleyh** · 03-05-2013, 12:37 PM

Code:

#main{
	top: 100px;
	left: 250px;
	width: 100%;
	height: 100%;
}

At the minute, this isn't actually doing what you think - there is no positioning defined (absolute? relative? fixed? etc) so the top and left as you have them, are irrelevant.
The #main div is actually defaulting to top:0, left:0, and so spans the full/complete width of the whole web page. This is causing the white panel to center within the full width of the screen, rather than inside of the grey panel on the right.

Furthermore, the top 100px of your white content panel is hidden underneath the header - we cant see that in your test page, but if you add a few extra lines of content, this is the result: http://fofwebdesign.co.uk/template/_...oot-b4fix.html

Try narrowing the window and you'll see another problem - the white content panel slides behind the menu, so that would need to be addressed too.

So now we come to the fix - replace your #main and #content CSS with this;

Code:

#main{ 
	position: absolute; /* fix #main to all 4 corners of screen - 100% width and height */
	top: 0;
	right: 0;
	bottom: 130px; /* offset for combined top and bottom padding in #content */
	left: 0;
	z-index: -1; /* put #main to back - stop #head and #foot overlap */
	text-align: center; /* make #content float in center */
	min-width: 750px; /* stop #content floating behind #left on narrow screens - combined width of #left + #content */
}

#content{
	display: inline-block; /* change default block behaviour - make div work with margin-left */
	margin-left: 250px; /* width of #left - offset so #content appears centered */
	padding: 100px 0 30px 0; /* stop #content being hidden under #head and #foot - combined heights of #head + #foot */
	width: 500px;
	min-height: 100%;
	background: white;
	color: black;
	font-size: 24px;
}

I've added comments to explain my changes so read through those and use the logic to make changes if you need to.
Here's an example of how the revised page looks: http://fofwebdesign.co.uk/template/_...loat-foot.html
Tested in IE8/9/10, Chrome, Firefox, Safari (Windows, iPhone, iPad), Opera

Can I make a suggestion? Try increasing the width of the white #content panel from 500px to 750px, and also increase the min-width of #main to 1000px - I think it will suit the average screen size a little better because more people are using monitors that are a minimum of 1024px wide.

**Nosilence** · 03-05-2013, 03:41 PM

Hey Beverleyh !!

You was still help me 3years ago when i had a problem, now you did it again !!!
You make me very happy, this is exactly what i was searching since few days. You are awsome !! Thanks a lot.

Send me your adress and i will send you some flowers

Have a nice day
Ralph