CSS floating 3 image Vertical Center

HTML & CSS
1

I am newbie:confused:

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.

:eek:


Current Code is below: {image attached}


<!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>
2

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.


<!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>