Solved

Vertically Center Div with Top & Bottom Panels

Posted on 2009-05-14
7
472 Views
Last Modified: 2012-05-07
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
0
Comment
Question by:hddesign
  • 3
  • 3
7 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 24386313
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

0
 

Author Comment

by:hddesign
ID: 24386364
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.

0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 100 total points
ID: 24386762
I think I understand now. Most folks won't see much if any of the bottom. If your div in the middle is 600px, at 1024x768 that's almost all of the available real estate. If you provide a better idea of the usage, I may be able to suggest a different approach. You may be able to accomplish your goal with a background image.
<!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 style="margin:0;padding:0;">

    <div style="position:absolute;height:100%;width:1000px;margin:0 auto;text-align:left;height:100%;left:50%;margin-left:-500px;">

        <div style="position:relative;height:27%;background:#009;color:#CCC">Text

        </div>

        <div style="position:relative;height:600px;background:#900;color:#CCC;overflow:auto;padding:0 10px;">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id leo a purus sollicitudin dignissim ut at tellus. Duis pharetra ligula quis magna tempus in feugiat nulla porta. Nam sit amet urna et augue lacinia consequat. Donec euismod porta est, non suscipit felis aliquet sed. Suspendisse vitae elit nec eros scelerisque venenatis non venenatis nulla. Curabitur imperdiet sapien eget sem ultricies consequat. Quisque adipiscing ligula ante. Cras et lacus ut est lobortis posuere. Sed semper pulvinar cursus. Vestibulum pretium nibh a nibh tempor gravida. Nunc vel quam et est iaculis auctor vel hendrerit nibh. Donec et mauris et magna condimentum feugiat posuere ac lacus. Quisque ac elit justo. Vivamus eu luctus ante.

    

    Vestibulum suscipit, sem sagittis convallis consectetur, lectus nisi tempus neque, sed suscipit dui mauris quis ligula. Fusce sit amet velit vitae dolor ornare mattis non eu dolor. Pellentesque lacus diam, fringilla ac consequat ac, elementum vel magna. Aliquam erat volutpat. Aenean quis sem nibh, id lobortis sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tempor varius mi, sed sollicitudin risus sodales in. Cras consequat pulvinar sollicitudin. Integer facilisis suscipit vestibulum. Cras urna purus, pharetra sit amet dictum elementum, luctus vitae justo.

    

    Fusce eget ipsum ac tellus convallis consequat porta et elit. Suspendisse ligula justo, vestibulum nec egestas eget, dictum a lorem. Duis convallis mi sed sem placerat vel ultricies orci placerat. Curabitur in turpis sed nunc ultrices blandit vitae ac felis. Praesent fringilla neque vitae risus blandit feugiat fermentum sed mauris. Aliquam vel lectus sed velit eleifend ultrices. Fusce sagittis ultricies magna, et consequat eros placerat at. Fusce sagittis commodo euismod. Nullam ac ante et urna tempor egestas et vel erat. Morbi sagittis euismod sem ut semper. Suspendisse potenti. Vestibulum sodales laoreet magna quis vulputate. Fusce vel lacinia ipsum. Fusce commodo, justo id cursus blandit, elit justo tincidunt tortor, quis molestie lacus lacus a lorem.

    

    Etiam viverra tristique libero, vitae pulvinar nibh fringilla nec. Nullam at fringilla urna. Aenean suscipit tortor ut magna consectetur eu porta nulla fermentum. Mauris ullamcorper tristique lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a dolor a odio eleifend egestas. Sed tristique ligula ac nulla elementum et egestas nulla tristique. Mauris accumsan consectetur ante a pellentesque. Etiam molestie sapien eget nulla condimentum ut aliquet dolor volutpat. Fusce gravida dignissim arcu at sagittis. In hac habitasse platea dictumst. Ut eget porta tortor. Fusce ullamcorper quam eros, ac vulputate nunc. Mauris at nunc ligula, sit amet condimentum augue. Nullam sollicitudin tellus id elit semper adipiscing. Cras scelerisque vulputate leo in rhoncus. Aliquam dui ante, pharetra rutrum malesuada in, dapibus id massa. Integer eget nunc libero, nec dignissim ipsum. Suspendisse quis aliquet lorem. Fusce eget mauris nisi, vel lacinia orci.

    

    Maecenas in velit vitae sem varius porttitor. Duis nec cursus justo. Etiam dignissim magna at ligula pellentesque vestibulum. Vivamus lobortis porta aliquam. Ut justo magna, imperdiet ac feugiat nec, pretium in dui. Maecenas lectus felis, viverra non fringilla at, sodales nec augue. Nam in lectus id enim molestie pretium in bibendum ipsum. Nullam sit amet arcu vitae sapien malesuada pharetra. Donec gravida est elementum nibh vehicula blandit suscipit lorem commodo. Mauris non lorem risus, at ultrices tortor. Maecenas lectus orci, interdum eget tincidunt ac, aliquet sit amet arcu. Nunc ut est velit, ac auctor libero. Ut pellentesque ornare lobortis. Aenean sapien dolor, viverra nec convallis nec, hendrerit non est.

    

    Aenean tempor ultrices ligula viverra feugiat. Etiam enim dolor, varius vel feugiat quis, ultricies vel enim. Maecenas vitae sem egestas libero eleifend consectetur. Pellentesque at dolor mi, non mollis metus. Vivamus quam ligula, pharetra mattis tempor eu, accumsan sollicitudin purus. Cras at pulvinar nisl. Donec non pretium diam. Duis vel velit quam, vitae volutpat turpis. Vestibulum dui justo, imperdiet a pretium non, ornare semper risus. Suspendisse luctus volutpat consectetur. Nam a lacus vitae lectus dignissim rhoncus sed et mauris. Pellentesque ante velit, interdum non auctor non, tempus quis quam. Phasellus sed tincidunt est. Aliquam mollis interdum lorem vel sollicitudin. Aliquam erat volutpat. Nulla nibh urna, feugiat quis gravida non, pulvinar non neque. Sed eu ligula eu sapien posuere vehicula.

    

    Cras porttitor, turpis vitae consectetur convallis, velit metus elementum sapien, in vulputate enim lorem quis tellus. Phasellus porta risus erat, sollicitudin faucibus arcu. Nam id justo ac tellus tristique ultrices at vitae tortor. Donec vitae nisl purus. Vivamus justo orci, mattis vitae tempus ut, malesuada et tellus. Nam at est arcu, sit amet scelerisque sem. Donec dictum scelerisque sapien, a bibendum justo convallis eu. Duis in nibh a augue mattis porta. Aenean eu quam lacus. Maecenas sollicitudin tristique ullamcorper. Nullam quis sapien ornare enim ultricies interdum. Suspendisse sed massa justo, et volutpat metus. Morbi dignissim ullamcorper nulla, et laoreet erat convallis et. Maecenas in ligula lorem, scelerisque imperdiet erat.

    

    Fusce ut orci nec dolor venenatis dapibus. Cras vulputate mauris vitae massa mattis nec convallis erat consequat. Ut bibendum augue quis ipsum iaculis luctus. Ut porta sodales molestie. Cras quis sem augue. Aliquam porta placerat elit, eget venenatis purus euismod sed. Maecenas id ligula fringilla neque laoreet aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam nec lacus a erat dapibus rutrum sed sed dui. Cras laoreet turpis vitae lorem fringilla blandit. Aliquam sed nibh et dolor egestas laoreet ac eu nulla. Sed accumsan varius scelerisque. Morbi vestibulum euismod purus, et posuere ipsum auctor vel. In vitae lacus massa. Integer eu odio turpis, in molestie diam. Pellentesque eleifend elit ac ipsum placerat at aliquet sem vehicula. Cras urna mi, lobortis id faucibus nec, tempor vitae purus. Cras auctor lacinia varius. Morbi porttitor, nisi a mattis pretium, nunc magna cursus massa, a ultrices nisl odio ac enim. Vestibulum consequat metus vitae odio adipiscing a hendrerit risus porttitor.
 

        </div>

        <div style="position:relative;height:27%;background:#0C0;color:#CCC">Text

        </div>

    </div>

</body>

</html>

Open in new window

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:hddesign
ID: 24386905
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...

0
 

Accepted Solution

by:
hddesign earned 0 total points
ID: 24387241
I figured it out:


<!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>Pacifica Music | BETA</title>
 

<style>

html, body{

margin:0;

padding:0;

background-color:#a2afb6;

height:100%
 

}
 

.centered_div {

width:1000px;

height: 750px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -500px;

margin-top: -375px;

background-color:#FF0000;

}
 

.top_div {

width:1000px;

background-color:#0000FF;
 

margin-left:auto;

margin-right:auto;

height:50%;

}
 

.btm_div {

width:1000px;

background-color:#009900;

margin-left:auto;

margin-right:auto;

height:50%;

}
 

</style>
 

</head>
 

<body>
 

<div class="top_div"></div>

<div class="centered_div"></div>

<div class="btm_div"></div>
 

</body>

</html>

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 24387901
Cool, thanks for posting!
0
 
LVL 5

Expert Comment

by:sscotti
ID: 24392538
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.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now