Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member thirdeyeblind82's Avatar
    Join Date
    Sep 2011
    Posts
    3
    Member #
    29242
    Hi guys, I should use vertical align with divs, the same way it works on tables.

    I'll show you a drawing of what I'd like to do:


    I don't know the height of DIV2 and I want that it will be vertical-aligned with DIV1 (wich I know the height).

    How can I do?

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I don't think there is such a thing for vertical align for nested divs, but you can accomplish pretty much the same this using percentages with your padding.

    something like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    * {
    margn: 0;
    padding:0;
    }
    #box1{
    heght:250px;
    width:250px;
    margin:0;
    padding:20% 13% 20% 13%;
    border: 1px solid #000;
    }
    #box2{
    height:60%;
    width:80%;
    margin: 0;
    padding:5%;
    border:1px solid #ff0000;

    }

    </style>
    </head>
    <body>
    <div id="box1">
    <div id="box2">
    <p>testing, testing, testing<br>testing,testing,testing</p>
    </div>
    </div>
    </body>
    </html>

  4. #3
    Junior Member thirdeyeblind82's Avatar
    Join Date
    Sep 2011
    Posts
    3
    Member #
    29242
    The problem is that I have various DIV1, and into everyone there is a DIV2 with different height. I should put all these DIV2 vertical aligned...

  5. #4
    Junior Member thirdeyeblind82's Avatar
    Join Date
    Sep 2011
    Posts
    3
    Member #
    29242
    I solved the issue thanks to display:table;

    This is the code I used:

    Code:
    #div1{
    display:table;
    width:400px;
    height:400px;
    vertical-align:middle;
    overflow: hidden;
    }
    #div2{
    display:table-cell;
    width:100%;
    vertical-align:middle;
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com