div's not middle aligning when float is used

**tomorrows_here** · Feb 22, 2010 17:01

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)?

**dresden_phoenix** · Feb 22, 2010 17:13

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.

**Rayzur** · Feb 22, 2010 17:50

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.

Code HTML4Strict:

<!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%;
}
#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>

User Tag List

Thread: div's not middle aligning when float is used

Thread Tools

Display

div's not middle aligning when float is used

Bookmarks

Bookmarks

Posting Permissions