If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

4 colums boxmodel with header and footer

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

The Following User Says Thank You to ajfmrf For This Useful Post:

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

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.

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.

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