CODEWITHSUNDEEP
htmlcss
John.P
John.P

Reputation: 657

Displaying images horizontal

I have three pictures that I want to display incline, but I can't do it and I can't figure it why.

HTML:

    <div class="nav3">
<img class="bild" style="width: 100px; height:100px; align="left"" src="http://s1.bwallpapers.com/wallpapers/2014/01/20/white-rose-picture_111312696.jpg" alt="Mountain View" />

<img class="bild" style="width: 100px; height: 100px; align="left"" src="http://commun-it.ca/wp-content/uploads/2012/06/Big-Picture-Mountains-credit-blimiers2.jpg" alt="Mountain View" />

<img class="bild" style="width: 100px; height: 100px; align="left"" src="http://i.telegraph.co.uk/multimedia/archive/03157/Joel-Hindson_3157026k.jpg" alt="Mountain View" />
</div>

CSS:

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

.bild{
    display:inline-block;
    width: 64px; 
    height: 64px; 
   }

http://jsfiddle.net/3Un8J/130/

Upvotes: 0

Views: 76

Answers (4)

Kate Moore
Kate Moore

Reputation: 11

You need to take out the width on .nav3, because it is set to 150px and images width is 100px. There is not enough space.

Upvotes: -1

tylerism
tylerism

Reputation: 679

  • You need to use display:inline-block not incline.

  • Also you need to remove the width of the .nav3 class.

  • Lastly, if you are trying to get the images to be RIGHT next to each other, it is worth noting that browsers will put that little space next to each element (in your case image) when using display:inline-block. You need to remove all white space between the images if you want them to touch.

Upvotes: 0

user5053312
user5053312

Reputation:

Each img tag has an inline-style-property set with a css-style-rule setting their width to 100px (<img style="width: 100px;...). This applies in the end but your nav3-div has only a width of 150px.

You either need to set the width to 350px (like it has been said by dajnz) or you need to either remove that inline-style-property and change the css-width-property of the class .bild to 50px or change the inline style width-property to 50px (consider the last two options in case smaller pictures are acceptable for you)

Upvotes: 1

dajnz
dajnz

Reputation: 1188

If you mean inline instead incline, look this jsfiddle,

you have to increase width of container block, then all images will be inline:

width: 350px;

Upvotes: 2

Related Questions