SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Aligning vertically a division

    Hi there,

    I am developing a site using CSS and HTML and I'd like to vertically center a whole division (with stuff inside).

    In one page, I am having a big division containing two internal divisions:
    - one on the left with an image and a name
    - one on the right with text

    The height of the whole wrapping division is the highest of the internal divisions.
    Example (picture and name on the left and text on the right, all wrapped in a division):

    ****************************
    * picture * text text text text *
    * name * text text text text *
    * * text text text text *
    * * text text text text *
    ****************************

    The question is how could I center the left area in order it looks like this? Remember the total height depends on how much text the right area has.

    ****************************
    * * text text text text *
    * picture * text text text text *
    * name * text text text text *
    * * text text text text *
    ****************************


    Thanks a lot!!!!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Cant really see what you are aiming at there.. but here is my guess.

    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    			.outer { border: 1px solid;border-left:182px solid pink; margin:0 15%}
    			.pic, .txt {display: inline-block; vertical-align: middle;  }
    			.txt {   border: 1px solid; }
    			.pic {margin-right:-0.3em;width: 150px; text-align: center; margin-left:-182px; 
    			text-align: center; padding:15px;  border: 1px solid}
    			.pic img { display: block; margin:0 auto; height:150px; width:100px; }
    			
    		</style>
    	</head>
    	<body>
    <div class='outer'>
    	<div class='pic'><img src="X" height=150 width=100 alt='you should always have alt text'>some text</div>
    	<div class='txt'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    	</body>
    </html>
    hopefully that helps


Bookmarks

Posting Permissions

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