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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    vertical align using css -> how?

    Hi all,

    Vertical align seems to almost impossible using css? (perhaps my lack of knoweldge).

    Can anyone tell me how I get the text/content in the div_left to be vertically aligned?

    thanks,
    Peter

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <meta http-equiv='Content-Type' content='text/html;charset=iso-8859-1' />
    <title>Test</title>
    <head>
    <style type="text/css">
    
    .div_box
    {
    	border: 			2px red solid;
    	width:				auto;
    }
    
    .div_outer
    {
    	width:				500px;
    	border:				1px solid Gray;
    	margin:				auto;
    	padding:			2px;
    	padding-bottom:		2px;
    }
    
    .div_content
    {
    	font-family:		Verdana,Tahoma,Arial,Sans-Serif;
    	font-size:			10px;
    	width:				auto;
    	border:				0;
    	margin:				0;
    	padding:			0;
    	background-color:	lightblue;
    }
    
    .div_left
    {
    	width:				100px;
    	height:				50px;
    	border:				0;
    	border-right:		1px white solid;
    	border-bottom:		1px white solid;
    	margin:				0;
    	padding:			0;
    	background-color:	darkgray;
    	float:				left;
    }
    
    .div_right
    {
    	width:				auto;
    	height:				50px;
    	border:				0;
    	border-bottom:		1px white solid;
    	margin:				0;
    	padding:			0;
    	background-color:	yellow;
    }
    
    
    
    </style>
    
    </head>
    <body>
    
    <!-- red box that surrounds the entire div_outer -->
    <div class="div_box">
    
    <!-- this is what we want to center at some point (not right now) -->
    <div class="div_outer" >
    	<div class='div_content'>
    	
    		<!-- left side stuff -->
    		<div class="div_left">
    		Left Side
    		</div>
    		
    		<!-- right side stuff -->
    		<div class="div_right">
    		Right Side
    		</div>
    	</div>
    
    	<div class='div_content'>
    	
    		<!-- left side stuff -->
    		<div class="div_left">
    		Left Side
    		</div>
    		
    		<!-- right side stuff -->
    		<div class="div_right">
    		Right Side
    		</div>
    	</div>
    
    </div>
    
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    .div_left
    {
    	width:				100px;
    	height:				50px;
            line-height:50px;
    	border:				0;
    	border-right:		1px white solid;
    	border-bottom:		1px white solid;
    	margin:				0;
    	padding:			0;
    	background-color:	darkgray;
    	float:				left;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    to abduraooft,

    your method is using a hardcoded 50px value...
    I know my example has hardcoded values but they are there just for making the problem visible.

    the content I have has variable height.. so I need a dynamic solution.

    any suggestions
    Peter

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Hi

    well as i understand it's not really possible for variable sizes with HTML/CSS alone. You should read this http://phrogz.net/CSS/vertical-align/index.html.

    If you can accept the above necessities, the solution is:

    1. Specify the parent container as position:relative or position:absolute.
    2. Specify a fixed height on the child container.
    3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
    4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.
    You can use the above but would need JS to calculate what margin-top is needing to be. I have spent days on end searching for a similar solution and never found one.
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    This might interest you, then:
    Code:
    
    <!doctype html>
    <html lang="en">
      <head>
        <title>miaow</title>
        <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html {
      font: 12px/1.8 'lucida grande', 'lucida sans unicode', sans-serif;
    }
    #container {
      position: relative;
      height: 100px; /* this can be left to the default, calculated height and is here for example purposes */
    }
    #content {
      position: absolute;
      top: 50%;
    }
    #content p {
      position: relative;
      top: -50%;
    }
        </style>
      </head>
      <body>
        <div id="container">
          <div id="content">
            <p>miaow</p>
          </div>
        </div>
      </body>
    </html>


  •  

    Posting Permissions

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