Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2004
    Posts
    128
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Problem with vertical alignment...

    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:

    Code:
    <html>
    
    <head>
    <title>???</title>
    <style type="text/css">
    body {
    background:#8b8b8b;
    color:#303030;
    font:76% Verdana,Tahoma,Arial,sans-serif;
    margin:0;
    padding:0;
    }
    
    #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; }
    
    </style>
    </head>
    
    <body>
    <div id='container'>
    <div id='contents'>
    <form id='login' action='action.php?' method='post'>
    <fieldset><legend>Login:</legend>
    <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>
    </fieldset>
    <small><a href='link.php'>Link</a></small>
    </form>
    </div>
    </div>
    
    </body>
    
    </html>
    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?

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    128
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Bump.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •