CSS - Elements stacking vertically not horizontally - html

Question

I have a row with seven small images and a heading which I need to stack horizontally but they're stacking vertically. This is how it looks -
I'm sure this is really simple but I'm stumped. I'm using reset & skeleton grid. This is the relevant code -
HTML
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
<img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
<h4>POST PRODUCTION</h4>
<img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
<h4>2D / 3D ANIMATION</h4>
<img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
<h4>ADHOC</h4>
<img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
<h4>INTERACTIVE & PERSONALISED</h4>
<img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
<h4>TV ADVERTS</h4>
<img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
<h4>360 VIDEO & VIRTUAL REALITY</h4>
</div>
</div>
CSS
section#products {
height: 700px;
max-width: 100%
}
.row {
height: 350px;
max-width: 100%;
}
.agencyproducts {
position: relative;
display: block;
text-align: center;
}
.agencyproducts img {
position: relative;
line-height: 1;
top: 50%;
}
.agencyproducts h4 {
display: block;
text-align: center;
font-size: 10px;
}

Answer 1

The h4 tags which you re using as captions are block elements, which means, their width is 100% by default. Also, you have nothing that associates/unifies them with the images they belong to.
The common way nowadays is to use a figuretag to wrap image and text, and put the text into a figcaptiontag inside that figure tag. Then apply text-align: center; and display: inline-block; to the figure tag to center image and text inside and allow them to appear next to each other:
figure {
text-align: center;
display: inline-block;
max-width: 100px;
vertical-align: top;
margin:10px;
}
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image with a longer caption
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>

Answer 2

Images and Headers by default have display set to block, meaning they are on their own lines. float used to be the preferred way of achieving single-line display for block elements but it should be avoided as float has some weird behaviors. Instead we now use display: inline-block; or display: inline; - apply this to the elements you want on a single line and it will make it so!
just example (not copying your code - just simple example script):
HTML:
<div>
<img src="one.png" class="inlineImg" />
<img src="two.png" class="inlineImg" />
<img src="three.png" class="inlineImg" />
</div>
CSS:
.inlineImg {display: inline;}
this will display the images on a single line (providing the div is big enough)

Answer 3

.agencyproducts {
position: relative;
display: inline-flex;
text-align: center;
}
And you could put the main title outside of row div
That should all make them horizontal. You may need to add some padding to separate the items tho.

Answer 4

You can wrap the img- and h4-Tags with a div-Tag and make it float.
<div class="wrapper">
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
</div>
CSS:
.wrapper {
float: left;
}
Don't forget to unfloat afterwards.

Answer 5

The H4 will make them 'stack' vertically. Best to enclose each image and heading in it's own block or span, and on that div/span use " display: block; float: left;".

Answer 6

Basicly the h4 element has automaticly a wifth of 100%, you can check this easily with the inspection tool of your browser.
The easiest was is to put a div arround h and img element
<div class="containerIcon">
//img element
//h element
</div>
.conainterIcon {
display: block;
width: 13%, //So they all fit in one line
float: left;
}

Answer 7

Put the image and the title below in a div, and float them all to the left. Like so—
.bullet-point { float: left; }
.clear-float { clear: both; }
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
.
.
.and so on
<div class="clear-float"></div>