vertical centering

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

vertical centering

Post by daedalus__ »

~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


i have this code snippet

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>asdasd</title>
    <link rel="stylesheet" type="text/css" href="css/screen.css" />
    <style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
        font-family: tahoma;
    }
    
    body
    {
        width: 100%;
        height: 100%;
        font-size: 10pt;
        /*overflow: hidden;*/
    }
    
    p
    {
        margin: 1em;
        text-indent: 1em;
    }
 
    body div#container div#top
    {
        border: 1px solid red;
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 192px;
    }
    
    body div#container div#pageContainer
    {
        border: 1px solid red;
        margin-top: 192px;
        margin-bottom: 192px;
        width: 100%;
        height: auto;
    }
 
    body  div#container div#pageContainer div#page
    {
        border: 1px solid blue;
        width: 800px;
        margin: auto;
    }
 
    body div#container div#bottom
    {
        border: 1px solid red;
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 192px;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
 
        </div>
        <div id="pageContainer">
            <div id="page">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ligula, convallis ac, consequat at, feugiat et, lorem. Curabitur interdum elit sit amet tellus. Donec dignissim arcu quis nisi. Quisque rutrum. Aenean mollis pede ac dui. Fusce ullamcorper tincidunt libero. Fusce sapien nulla, tempor a, condimentum a, convallis non, mauris. Cras pellentesque tellus vel ante. Nunc ultricies varius nibh. In justo. Pellentesque vel justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, nisi sed bibendum suscipit, metus urna pharetra urna, nec vulputate ligula ipsum vitae purus. Ut quis sem nec velit ultrices molestie. Mauris purus enim, auctor ac, blandit eu, venenatis sit amet, lorem. Nullam diam. Fusce malesuada tristique ligula. Mauris in erat. Maecenas ante.</p>
                <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porta, nibh at pharetra mollis, enim dolor scelerisque tortor, et mattis leo leo fermentum enim. Integer consectetur, massa sed ultricies fermentum, elit lacus varius lacus, ut convallis velit enim et risus. Quisque consectetur, enim quis pellentesque fermentum, neque massa venenatis eros, ut ultricies magna elit ut turpis. Donec nec mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla. Curabitur ac pede id ante aliquam lobortis. Nulla convallis, odio id pharetra tincidunt, sapien odio aliquet urna, eu vestibulum diam nunc eget dolor. Mauris at tortor nec lacus ornare auctor. Aenean non sem ac arcu auctor sodales. Vestibulum metus nunc, dapibus sit amet, aliquam ac, congue quis, odio. Pellentesque lobortis dignissim lorem. Vivamus lacus mauris, dictum dapibus, hendrerit ut, bibendum quis, ipsum. In a massa quis orci suscipit pulvinar. Quisque quis odio vel lorem dictum tempus.</p>
                <p>Maecenas ornare pharetra nibh. Vestibulum sollicitudin, lectus ut tristique viverra, tellus sapien commodo sem, ut blandit sapien velit in justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam a odio a nibh tempus bibendum. Nullam placerat lacinia tortor. Sed nibh. Donec porttitor rhoncus eros. Nunc id ante at leo lobortis blandit. Donec accumsan vulputate turpis. Pellentesque id orci a arcu tristique elementum. Integer at enim ut lectus luctus dapibus. Nulla fringilla mattis purus. Vestibulum ac metus vitae tortor dictum consequat. Sed libero lectus, faucibus eget, scelerisque in, mollis sit amet, lacus. Donec hendrerit luctus diam. Mauris pulvinar, massa at ullamcorper convallis, ante ipsum posuere arcu, sed semper ante neque a tellus.</p>
                <p>Nulla eget turpis eu mi rutrum pulvinar. Praesent rutrum, eros a tincidunt egestas, metus orci faucibus ipsum, quis sollicitudin purus mi ac risus. Donec massa. Maecenas hendrerit semper purus. Nam auctor nulla et magna. Morbi elit lectus, tristique in, tincidunt at, venenatis ornare, neque. Donec mauris. Curabitur non arcu. Mauris dolor. Integer ornare dui et augue.</p>
                <p>Praesent mi metus, pulvinar et, pharetra consequat, aliquam eu, tortor. Aenean accumsan vestibulum ante. Suspendisse turpis. Phasellus nec mauris. Cras purus eros, ornare in, rutrum in, rhoncus vel, urna. Sed dignissim, neque vitae sodales auctor, tortor nisl auctor orci, elementum varius pede dui sed tortor. Aenean turpis diam, blandit eget, fermentum consectetur, ullamcorper et, nisi. Sed ultrices lacinia nibh. Phasellus euismod iaculis metus. Suspendisse est. Quisque posuere diam quis tellus. Maecenas ut orci.</p>
            </div>
        </div>
        <div id="bottom">
            
        </div>
    </div>
</body>
</html>
 
this should vertically center the div #page

im trying to make a page

where the header is 192px

the footer is 192px

and the pageContainer is whatever height is left over

and #page will scroll (overflow) up and down inside of that

i dont want to use positioning or margin hacks

i know there is a way i just cant remember

all my old code is on my dead laptop hard drive :(

if anyone can remember how to do this

i would sure appreciate some help

daedalus thanks you!

THUNDERCATS!
HOOOOOOOOOOOOOOOOOOOO!


~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
Last edited by daedalus__ on Mon Jan 12, 2009 12:39 am, edited 1 time in total.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: vertical centering

Post by daedalus__ »

bleh. so i changed the position of the top and bottom divs to fixed. now they don't move. thats fine since it works and im in a hurry but the scroll bar isn't where i intended it to be. i'm still working for a solution, i'll post it when i figure it out. until then if any knows a way, please post :D

again, im trying to have a div on top and a div on the bottom of the page 192px tall.

the body is the viewable height and doesnt change

the content div is the height left over after the top and bottom divs it should extend the full distance regardless of content and overflow if it's larger.

im pretty sure the problem is that i need to provide a height but saying height: auto doesn't work the way i intend it to and thats where im stuck.

thanks for reading :]
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: vertical centering

Post by daedalus__ »

In case anyone wants to know I remember that the way I did it last time was by using percentages as the height for each container (top, middle, bottom). I suppose you have to set a height. I haven't figured out how to do it using only margins. I may use javascript to set the height of the middle container in pixels by doing some math. I'll post that here if I end up doing that. ^^
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: vertical centering

Post by JAB Creations »

Mess with this...

Code: Select all

#prompts { background-color: #000; border: #fff solid 1px; display: block; height: 398px; left: 50%; margin-top: -198px; margin-left: -369px; position: absolute; top: 50%; width: 738px; z-index: 3;}
...I'm in JavaScript mode right now though I'm sure this will help get you on the right track. :wink:
Post Reply