SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    div box to behave inline like following on from an image

    hello, i was hoping applying display:inline to the 2nd contained div in the following html doc would get what a i wanted; the 2nd contained div following on after the image with the bottom of the 2nd contained div verically aligned with the bottom of the image -- so both the image and the 2nd contained div (with the table in) on the same baseline, but it doesn't behave like that. how to make it bahave like that? thanks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
       <title>Untitled</title>
       <style type="text/css">
       div div { display:inline; }
       </style>
    </head>
    <body>
    <div>
       <img src="#" width="300" height="300" style="background:yellow" />
       <div>
          <h4>sdfasdfasdfasdf</h4>
             <table>
             <tr>
                <td>asdfasdfsad</td>
                <td>asdfasdf</td>
             </tr>
             <tr>
                <td>asdfasdf</td>
                <td>dfasdfadsf</td>
             </tr>
          </table>
       </div>
    </div>
    </body>
    </html>

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

    You can't just make an element display:inline and then expect all the elements inside it to be display:inline also. You would need to make all the inner elements display:inline also and then they would just line up in a single line which is not waht you want.

    It looks like you really want display:inline-block which is only supported in opera/Firefox3 and safari. Firefox 2 and IE don't support it.

    You can use a vendor specific extension for Firefox and a hack for IE but it won't pass the vaidator although it will do no harm.

    However there is also a bug in FF2 which means that the H4 heading would also need to be in the table. This is the code that works,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css">
    .wrap { 
     display:-moz-inline-box;
     display:inline-block;
     vertical-align:bottom;
    }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    .wrap {display:inline}
    </style>
    <![endif]-->
    </head>
    <body>
    <div><img src="img2.jpg" width="300" height="300" alt="" style="background:yellow" />
        <div class="wrap">
            <table>
                <tr>
                    <td colspan="2"><h4>sdfasdfasdfasdf</h4></td>
                </tr>
                <tr>
                    <td>asdfasdfsad</td>
                    <td>asdfasdf</td>
                </tr>
                <tr>
                    <td>asdfasdf</td>
                    <td>dfasdfadsf</td>
                </tr>
            </table>
        </div>
    </div>
    </body>
    </html>
    If you want valid code then you would need to float the image and the div surroundng the table and forget about the automatic vertical alignment. Or use a table for the whole thing including the image.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi Paul, blimey, yup, that's exactly what i meant/wanted. thanks very much


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
  •