View Full Version : Problem with vertical alignment...

12-12-2007, 03:08 AM
I'm using the display:table; method, and it's kinda doing what I want, but not exactly. Let me just give the code that I'm working on:

HTML Code:


<style type="text/css">
body {
font:76% Verdana,Tahoma,Arial,sans-serif;

#container {
background-color: grey;
height: 88px;
padding: 0.5em;
position: absolute;
right: 1em;

display: table;

#contents {
background-color: #3f3f3f;
color: #fff;
width: 100%;
-moz-border-radius: 15px;

display: table-cell;
vertical-align: middle;

#contents form {
padding: 5px 10px;
margin: 0px; //???

#email, #pass {
float: left;
width: 115px;
padding:0pt 5px 0pt 0pt;

#contents input {width: 110px; }

#contents fieldset {
border: none;
margin: 0px;
padding: 0px;

#contents legend { display:none; }


<div id='container'>
<div id='contents'>
<form id='login' action='action.php?' method='post'>
<label id='email'>Email: <input type='text' name='e' value='e-mail' /></label>
<label id='pass'>Pass: <input type='text' name='p' value='pass' /></label>
<small><a href='link.php'>Link</a></small>



Okay. Right now, the stuff inside #contents is vertically centering to #container, which is good. Perfect. But it's the background that I'm having problems with. It stretches to the bottom of the container. I'd like it to fit the stuff inside content. And example of what I'm talking about it the difference in the backgrounds height on #contents if you remove display: table-cell;

Any help?

12-13-2007, 11:59 PM