SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Display Issue

  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Display Issue

    Hi, I have a display issue on my page here: http://www.rawfeddogs.org/adoptions/...adopt_app.html

    The photos are supposed to all be on the left and as a block, not as it is currently displaying (in both IE and Firefox) with 5 on the top row, then 3, then 2 then 1 !!

    I just know the answer to this is going to be simple, but I can't figure it out!! muhwaaah!!

    Please can someone help me?

    Many thanks in advance
    Michelle
    Last edited by ralph.m; Sep 6, 2013 at 07:03. Reason: removed faux signature

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Those divs are not all the same height, so some are snagging on others as they try to float left. Rather than float: left, set them all to display: inline-block:

    Code:
    div {
      display: inline-block;
      vertical-align: top;
    }
    Also, all those divs can be styled with the one same rule. Don't use inline styles, as they are inefficient. Now you have to go and change each one, instead of just setting the rule in one place.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! Mox2005, your problem should be fixed by simply set all with same height and width for the images so it will be align with no problem...

    Code:
    <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dogs for Adoption</title>
    </head>
    
    <body>
    <p><b>Dogs in Need of Adoption and Sponsorship:</b></p>
    
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.354499997983558.1073741855.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/aaron.jpg" width="251" height="190" style="border-width: 0px" /><br />
    	Aaron</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.388374317929459.1073741907.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/basil.jpg" width="251" height="190" style="border-width: 0px" /><br />Basil</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.361190717314486.1073741869.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/hng.jpg" width="251" height="190" style="border-width: 0px" /><br />Hansel 
    	&amp; Gretel</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.356904767743081.1073741858.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/joshua.jpg" width="251" height="190" style="border-width: 0px" /><br />Joshua</a></p>
    </div>
    <div style="float: left; width: 251px">
    <p><a target="main" href="https://www.facebook.com/media/set/?set=a.360667084033516.1073741868.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/lori.jpg" width="251" height="190" style="border-width: 0px" /><br />Lori</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.385294344904123.1073741902.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/marta.jpg" width="251" height="190" style="border-width: 0px" /><br />Marta and her Pups</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.357085937724964.1073741859.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/pnd.jpg" width="251" height="190" style="border-width: 0px" /><br />Peggy &amp; Dolly</a></p>
    </div>
    <div style="float: left; width: 251px; ">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.363780527055505.1073741877.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/ricky.jpg" width="251" height="190" style="border-width: 0px" /><br />Ricky</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.387107138056177.1073741905.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/rnl.jpg" width="248" height="187" style="border-width: 0px" /><br />Raya &amp; Lucky</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.374307386002819.1073741888.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/roshi.jpg" width="251" height="190" style="border-width: 0px" /><br />Roshi</a></p>
    </div>
    <div style="float: left; width: 251px">
    	<p>
    	<a target="main" href="https://www.facebook.com/media/set/?set=a.389370191163205.1073741909.135827796517447&amp;type=3">
    	<img src="http://www.rawfeddogs.org/adoptions/tyra.jpg" width="251" height="190" style="border-width: 0px" /><br />Tyra</a></p>
    </div>
    
    
    
    </body>
    
    </html>

  4. #4
    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)
    Quote Originally Posted by blogfreak View Post
    Hi! Mox2005, your problem should be fixed by simply set all with same height and width for the images so it will be align with no problem...
    Setting heights is fine as long as you are are sure it will never be exceeded. However what happens if a caption wraps (either when you have more text or the user resizes the text in the browser) and then you are back to square one

    Code:
    <p> <a target="main" href="https://www.facebook.com/media/set/?set=a.361190717314486.1073741869.135827796517447&amp;type=3"> <img src="http://www.rawfeddogs.org/adoptions/hng.jpg" width="251" height="190" style="border-width: 0px" /><br />
    				Hansel 	&amp; Gretel playing together in the yard</a></p>
    Using inline-block instead of float as Ralph suggests will avoid this issue altogether.

    Support for IE7 and under can be added quite simply (if needed).

    Code:
    div {
      display: inline-block;
      vertical-align: top;
    *display:inline;/* ie7 hack for inline-block */
    zoom:1.0;/*  ie7 hack for inline-block  */
    }


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
  •