How to make a nested div appear horizontally

Hi guys… I will appreciate your help fixing a css issue I have.

I want to make some divs inside a div container appear horizontally. Please find below the code I am working currently.

Thanks for the help.

<div class="container">
     <div class="item">
        <img src="/image-source" alt="img"/>
     </div>
      <div class="item">
        <img src="/image-source" alt="img"/>
     </div>
      <div class="item">
        <img src="/image-source" alt="img"/>
     </div>
</div>

.container {
   diplay: block;
}
.item { float: left }

You could make those divs with class item spans instead. Alternatively make the items display inline or inline-block.

@Gandalf Thanks for the reply. I will try and implement that now

The first is the most sensible solution or the two, but:-
Since the content is images, which display inline anyway, do they even need the extra wrapper?

<div class="container">
        <img src="/image-source" alt="img"/>
        <img src="/image-source" alt="img"/>
        <img src="/image-source" alt="img"/>
</div>

A div will display as block by default, so no need for this.

3 Likes

Even if ‘display’ was spelled correctly :slight_smile:

5 Likes

@PaulOB :scream: mehn… my bad for that. Thanks guys, was able to get it sorted.

You guys are the best

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.