i like combining absolutely positioned elements and stuff and usually
use them, maybe you'll like this method too:
<!DOCTYPE html>
<style>
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
#wrapper
{
height: 100%;
width: 100%;
}
#wrapper #centered_container
{
height:50%;
position:relative;
top:0px;
left:0px;
width:200px;
margin:0 auto;
}
#wrapper #centered_container #centered
{
position:absolute;
bottom:0px;
font-family:georgia,helvetica,arial;
font-size:12px;
color:black;
}
.clear {clear:both}
</style>
<body>
<div id="wrapper">
<div id="centered_container">
<div id="centered">
Hello from the DIV in the middle!
</div>
</div>
<div>
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
And this div goes under....and expands...<br />
</div>
</div>
</body>
2010/12/15 Gnarlodious <[email protected]>:
> After much experimenting I finally figured out it takes at least three
> DIVs:
>
> <body>
> <div style="display:table; height:98%; width:99%; position:fixed">
> <div style="display:table-cell; vertical-align:middle; border:1px
> solid red">
> <div style="background-color:#FFF; float:right; border:1px solid
> blue">
> Content is vertically centered
> </div>
> </div>
> </div>
>
> <h1>Lorem ipsum dolor</h1>
> ... content
>
> Anyone see an easier way?
> Page online here:
> http://etc.Gnarlodious.com/Support_Files/CenterVerticalFixed.html
>
> -- Gnarlie
>
> --
> --
> You received this because you are subscribed to the "Design the Web with CSS"
> at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
BAZINGA Designs
http://www.bazingadesigns.com
Igor Wnuk
Ul. PCK 5/20
24-100 Puławy
tel. 667 200 706
REGON: 060622686
NIP: 716-255-43-47
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
