SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div's not middle aligning when float is used

    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)?
    Last edited by tomorrows_here; Feb 22, 2010 at 17:10. Reason: added examples

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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>


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
  •