SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS floating 3 image Vertical Center

    I am newbie

    What I want to do--
    1. Float two image to the right
    2. one image to the left
    3. text under all images
    4. vertically align the left image in the middle of the two on the right.


    I seem to be going in circles.
    Can anyone give me a few suggestion or give me an idea of what the code should be? I probably have many issue, but for starter the text boxes on the right are really whacked.
    Also not matter what I do, I can not get the left box to center between the two on the right.




    Current Code is below: {image attached}

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    .topimagewrapper{
    	margin:0 auto;
    	text-align: center;
    	width: 700px;
    }
    
    .topimagewrapper p{
    	font-family:Tahoma, Geneva, sans-serif;
    	font-weight: 900;
    	letter-spacing: 0.1em;
    	font-size: .7em;
    	padding: 2px;	
    }
    
    
    .mainimage {
    	background-color: #F89838;
    	width: 300px;
    	border: 1px solid black;
    }
    
    .mainimage img {
    	background-color:  #CCC;
    } 
    
    .detail_image_wrap
    {
    	float: right;
    	background-color: #F89838;
    	border: 1px solid black;
    	
    	}
    .detail_images {
    border: 1px solid black;
    }
    .detail_images img {
    	max-width:250px;
    }
    
    .detail_images p {
    border-width: 0 1px 3px 1px;
    border-style:solid;
    border-color:black;
    }
    
    
    </style>
    </head>
    
    
    <body>
    <div class="topimagewrapper"> 
               		<div class="detail_image_wrap">                
                        <div class="detail_images"> <img src="6602_illus_02.jpg" width="250px"/>
                          <p>Sample Text</p>
                      </div><!-- end .detailed_images -->
                                                   
                    	<div class="detail_images">
                            <img src="6602_illus_03.jpg" width="250px"/>
                            <p>Sample Text</p>
                        </div><!-- end .detailed_images -->
    				</div><!-- end .detail_image_wrap -->
    	
      <div class="mainimage">
                		<img src="6602_illus_04.jpg" width="300px"/>
    				<p>Sample Text</p>
      </div><!--mainimage end -->
    	
    </div><!-- end .topimagewrapper---->
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You'd probably need the display:table properties to do this exactly as you want and automatically but ie7 and under don't understand display:table.

    Here's something close using inline-block that works from ie6+ but you will need to adjust the margin to make space between the columns.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .topimagewrapper {
        margin:0 auto;
        text-align: center;
        width: 700px;
        font-family:Tahoma, Geneva, sans-serif;
    }
    .imgwrap b {
        font-weight: bold;
        letter-spacing: 0.1em;
        font-size: .7em;
        padding: 5px 0;
        display:block;
        background-color: #F89838;
        border: 1px solid black;
    }
    .mainimage {
        width: 302px;
        margin:0 25px 0 0;
    }
    .imgwrap p {
        margin:0 0 2px;
    }
    .imgwrap img{border: 1px solid black;vertical-align:bottom}
    .imgright img {max-width:250px;}
    .imgwrap {
        display:inline-block;
        vertical-align:middle;
    }
    *+html .imgwrap {display:inline}/* ie7 */
    * html .imgwrap {display:inline}/* ie6 */
    </style>
    </head>
    <body>
    <div class="topimagewrapper">
        <div class="imgwrap mainimage">
            <p><img src="images/imgx3.jpg" width="300px"/><b>Sample Text3</b></p>
        </div>
        <div class="imgwrap imgright">
            <p><img src="images/imgx1.jpg" width="250px"/><b>Sample Text 1</b></p>
            <p><img src="images/imgx2.jpg" width="250px"/><b>Sample Text 2</b></p>
        </div>
    </div>
    </body>
    </html>


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
  •