2

I have this problem that always occurs when I'm using display: inline-block to display div's in line one by one. What happens is, when the text is bigger than the div and has to go onto a new line the following div's position/alignment is sort of indented. I have searched Overflow and I can't find anything that matches this problem.

I have included the HTML, CSS and a link to the page in question.

I'm using PHP as well.

http://www.carbondelight.co.uk/gallery.php

#g-con { 
    width: 960px;   min-height:300px;

}

#g-con img{
    float:left;
    border: solid 3px #fff;
    -webkit-box-shadow: 0 0 5px #242424;
    box-shadow: 0 0 5px #242424;
}

.giiCon {
        background-image:url(../assets/images/giiCon_bg.jpg);
    background-repeat:repeat-x;
    margin: 10px;
    width: 270px;
    height: 106px;
    display:inline-block;
    border-radius: 0 5px 5px 0;
    -webkit-box-shadow: 0 0 5px #242424;
    box-shadow: 0 0 5px #242424;
}

HTML

<p class='textshadow'>Please take a look at our gallery of parts.</p>

<div id='g-con'>

for ( $j = 0 ; $j < $rows ; ++$j )
{
    $row = mysql_fetch_row($result);

    $sql2 = "SELECT name,price,carID,categoryID FROM partTable WHERE partID='$row[5]'";

    $result2 = performQuery($sql2);

<div class='giiCon'><img src='$image$row[1]' /><p>$result2[0]</p><br /><p>hello</p>        
</div>
}

halfer
  • 19,824
  • 17
  • 99
  • 186
daniel blythe
  • 946
  • 2
  • 16
  • 44
  • 1
    where on the site are you having this issue? I cannot currently see the issue – Steve Nov 02 '11 at 11:53
  • As @Steve says, we can't see where the problem exists atm.. Does it still exist at all? — But from the rest of the code I'd suggest having a closer look at how the different `display` properties work and then select one carefully or maybe (probably in this case) consider a `float`. E.g. `

    $result2[0]


    hello

    ` indicates to me that there's probably a misconception existing.     – polarblau Nov 02 '11 at 13:24

1 Answers1

0

http://jsfiddle.net/pH4KY/ - is that the problem you mention? If it is, then it has nothing to do with the number of lines. It is because browser inserts a whitespace after each inline-block element if there is a whitespace in source code.

So, there are two solutions:

  1. Remove whitespaces between inline-block elements, as in http://jsfiddle.net/pH4KY/1/
  2. Add margin-right: -0.3em to each one. Like here: http://jsfiddle.net/pH4KY/7/

Also, consider declaring inline-block elements in a way every browser understands: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

unclenorton
  • 1,605
  • 11
  • 19