3

I need to have some images displayed inline block but after the first image there's a strage offset that I can't remove, can someone explain why the images has this behaviour?

here's the demo: http://jsfiddle.net/czssvg3p/2/

<div class="finitures">
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
</div>

css:

    .finiture-img
{
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:10px;
    width:15%;
    overflow:hidden;
    clear:both;
}

.finiture-img img
{
    border: 1px solid #898886; 
    margin-top:2px; 
    cursor:pointer;
    width:100%;
    overflow:hidden;
}

.finitures {
    margin: 0;
    border-bottom: 1px solid #9c9b9b;
    padding-bottom: 20px;
    width:100%;
    margin-top:100px;
    clear:both;
    overflow:hidden;
}

.finitures:last-child
{
    border-bottom: none;
}
Febri Valentino
  • 50
  • 3

5 Answers5

1

You're not closing the <div class="finitures"> element correctly (in your provided snippet, at least). So adding a closing </div> will fix your issue, removing this quirky behaviour. (only some browsers will try to interpret unclosed tags)

You're missing a closing </div> tag at the end of your snippet, leading to unexpected behaviour.

Since 'tidying up' fixed this issue, you can be almost certain it's an error in your html rather than css:

Just make sure with every opening tag you have a corresponding closing tag. This may be in the form of </elementName> (or /> if it is a self closing element i.e. image).

A good way to ensure that you don't do this, and also improve readability, is to correctly indent and layout your html (and css for that matter). This will further allow you to modify your markup if desired further down the line.

I would also like to point out that the layout of your html is also important. For example, placing elements next to each other may render them differently than placing them one under the other.

See here, where I'm using the exactly the same markup, but one i've placed on a new line. See how they appear/render differently?

* {
  margin: 0;
  padding: 0;
}
div {
  display: inline-block;
  width: 50%;
  background: blue;
}
input {
  width: 50%;
  display: inline-block;
}

.now {
  width: 49.5%;
}
<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />

<br/><br/><br/>
<div class="now">Div on left</div>
<input class="now" type="text" placeholder="text here" />

As a side Note you don't need the clear:both; css property unless you are floating your elements (personally i don't like floating elements, it can get too messy). Most functionality can be achieved from using positioning instead, which seems to be a much better option IMHO.

jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • I think that is it but which div are you talking about ? – Akshay Jan 16 '15 at 10:04
  • He has closed it at the end – Akshay Jan 16 '15 at 10:10
  • @Akshay:I was referring to OP's question, not fiddle. However, the layout of your html plays a part as well (i've just looked at the fiddle there now). Sometimes placing element declarations next to each other gives a different output than writing them one under the other. – jbutler483 Jan 16 '15 at 10:15
  • This is only the case when using display: inline-block; Then in order to place elements one next to each other, you have to make no white spaces between them or to use negative margins, or font-size: 0 on theirs parent. – Vladislav Stanic Jan 16 '15 at 10:28
  • @VladislavStanic: that (to me) sounds pretty hackish, IMO. the only option there that you've highlighted was the 'whitespace' one. However, I've never actually needed a situation where that has been required, as (usually) I prefer to use (A) divs with width `49.5%` or (B) alter to use a `positioning:absolute` approach. – jbutler483 Jan 16 '15 at 10:32
  • I don't think its hackish, its just a way to deal with white space with css. I did not invent anything here, read Shikhar Bhardwaj's answer for example or http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Vladislav Stanic Jan 16 '15 at 10:35
  • @VladislavStanic: That linked question is a *completely* different issue, and also in your 'linked' question, 90% of those suggest they are 'hackish fixes' and 'not clean method[s]' – jbutler483 Jan 16 '15 at 10:42
  • So you don't think there is an issue in this question with removing white space on display: inline-block; elements? Your answer leaves white space on all the .finiture-img items instead removing them all. It "looks ok" but it is not real solution. If he wanted to separate them 3px they would be separated about 7px because of the white space. So your answer is not a real answer. – Vladislav Stanic Jan 16 '15 at 10:49
  • The main issue in this question is that OP is experiencing a 'shift' in the first line compared to the others. My 'solution' works. No hacks of setting a font size of 0, no setting negative margins when *clearly* this stops the shifting. – jbutler483 Jan 16 '15 at 11:00
  • There's also a difference between needing to hack and not. But I'm not here to argue with you, I'm simply saying that there's no need to fix something that's not broken. – jbutler483 Jan 16 '15 at 11:16
  • Removing whitespace is not a hack... The browser is interpreting the whitespace in the inline elements as it should. It does make sense to remove the whitespace to make the browser show the elements **the way we want to** – bluefog Jan 16 '15 at 14:08
0

Modify the way of displaying finiture class

.finitures {
    ...
    display:table;
}
Jaay
  • 2,103
  • 1
  • 16
  • 34
0

Instead of display:inline-block on .finiture-img class, add a float:left property.

What are clear:both properties used for? You have no floats in your code...

Denis Slonovschi
  • 879
  • 9
  • 16
0

Line breaks and whitespace in the HTML make the inline elements have an invisible margin. To counter this, either :

  1. Remove the unnecessary line breaks and whitespace. This is the reason why the tidied up fiddle works fine.
  2. Specify negative margins for the elements. This is a bit more complicated, and may not display consistently on all platforms.

So removing the extra whitespace solves the problem.

Look here : http://css-tricks.com/fighting-the-space-between-inline-block-elements/

This question was about the same problem : carousel leaving pixels after moving

Community
  • 1
  • 1
bluefog
  • 1,894
  • 24
  • 28
0

You connected all the .finiture-img divs (making no white space in between) but you did not do it with first and second. That is the difference.

Vladislav Stanic
  • 795
  • 8
  • 13