Div's not middle aligning when float is used

HTML & CSS
1

So this is a confusing problem I’m having.

I have three surgical procedures I have listed at the bottom of my HTML page, and using an outer div with “display:table” and an inner div using “display:table-cell,” I am vertically aligning the procedure’s logos. The problem is that I use the “float:left” property on them, it doesn’t vertically align.

Examples (see bottom of page with “CustomVue,” “Conductive Keratoplasty,” and “Botox” logos):

Without float property
With float property

Side question: should I not be vertically aligning using CSS because versions of IE before 8 don’t support the “display” property for table and table-cell (and basically everything table related)?

2

whenever you float an element it automatically becomes display:block, and moves in the direction of a float.

I havent seen the code, so I am giving a really clumsy solution. wrap the whole thing ina div and float THAT div.

3

Side question: should I not be vertically aligning using CSS because versions of IE before 8 don’t support the “display” property for table and table-cell (and basically everything table related)?
Hi,
Yes, I would stay away from display:table if you need to support IE6/7.
This can be done very easily by setting a line-height equal to the height of those top image divs. Then you can just set vertical-align:middle on the images.

You were also using ID’s repeatedly in your page, you should be using classes when there is more than one instance of the same element.

Here is a standalone test using your images. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>vertical-align images</title>
<style type="text/css">
body {
    background:#CDF;
    font-size:100&#37;;
}
#colwrap {
    width:840px;
    margin:0 auto;
    overflow:hidden;/*contain inner floats*/
    background:#FFF;
}
.column {
    float:left;
    width:240px;
    padding:20px;
}
.imgwrap {
    width:240px;
    height:100px;
    line-height:100px;/*vertical-align the images*/
    text-align:center;/*center the images*/
    background:#EEF;
}
.imgwrap img {vertical-align:middle;}
</style>

</head>
<body>

<div id="colwrap">
    <div class="column">
        <div class="imgwrap">
            <img src="http://alc.gonzalezmarketing.com/images/customvue_logo.gif">
        </div>
        <p>Lorem ipsum dolor sit amet consectetuer ac nulla fringilla felis fermentum. Id volutpat egestas vel orci augue et libero lacinia enim cursus. Ultrices at tortor orci Vestibulum malesuada felis Ut pharetra semper Vestibulum.</p>
    </div>
    <div class="column">
        <div class="imgwrap">
            <img src="http://alc.gonzalezmarketing.com/images/ck.gif">
        </div>
        <p>Lorem ipsum dolor sit amet consectetuer ac nulla fringilla felis fermentum. Id volutpat egestas vel orci augue et libero lacinia enim cursus. Ultrices at tortor orci Vestibulum malesuada felis Ut pharetra semper Vestibulum.</p>
    </div>
    <div class="column">
        <div class="imgwrap">
            <img src="http://alc.gonzalezmarketing.com/images/botox_logo.gif">
        </div>
        <p>Lorem ipsum dolor sit amet consectetuer ac nulla fringilla felis fermentum. Id volutpat egestas vel orci augue et libero lacinia enim cursus. Ultrices at tortor orci Vestibulum malesuada felis Ut pharetra semper Vestibulum.</p>
    </div>
</div>

</body>
</html>