asked on

Vertically Center Div with Top & Bottom Panels

Hi Experts,
This should be simple but i can't figure it out, please see attached jpeg.

I need a vertically centered div with 2 other independent divs above and below it. The div's above and below need to fill the remaining space on the page.

cheers

3div.jpg

s8web

I'm not sure I understand. Is this what you're trying to accomplish?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Don't forget to put a title here.</title>
</head>
<body>
    <div style="position:absolute;width:1000px;margin:0 auto;text-align:left;height:100%;left:50%;margin-left:-500px;">
        <div style="position:relative;height:100%;background:#009;color:#CCC">Text
        </div>
        <div style="position:relative;height:600px;background:#900;color:#CCC">Text
        </div>
        <div style="position:relative;height:100%;background:#0C0;color:#CCC">Text
        </div>
    </div>
</body>
</html>

Open in new window

hddesign

ASKER

Thanks, close, but I don't need the top and bottom divs to be 100% for the page size (sorry for confusion), i just mean they need to vertically fill in whatever space is remaining of the full page height.

SOLUTION

s8web

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hddesign

ASKER

Thanks, basically the top div will have a background image with the y repeated and the bottom div needs to have a different background image with y repeated, it's to create a seamless background with a flash movie in the middle div.

The top and bottom background divs just need to resize their height according to how much space is left above and below the flash unit on various screen heights, I don't see how hardcoding a percentage height would work, it just makes the whole page scroll...

ASKER CERTIFIED SOLUTION

hddesign

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

s8web

Cool, thanks for posting!

sscotti

BTW, another solution is to create a background with the center being 600px long and the color of your middle section and 2 long ends (i.e. 600-1000px each) that are the color of your header and footer. You can use that as a background and position it in the center of the page.

<body style="height:100%;background:url(background.jpg);background-repeat:repeat-x;background-position:center;">

That works in Safari and I believe it works in Firefox if you set the height of the html element to 100%.

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">

Not sure about IE. If you don't mind making the background it is pretty easy and doesn't use much code and works well in those browsers. I'm a Mac, not a PC, so I don't know if it works in IE.

Vertically Center Div with Top &amp; Bottom Panels

Vertically Center Div with Top & Bottom Panels