CODEWITHSUNDEEP
htmlcss
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Elements stacking vertically not horizontally

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 -

Vertical not horizontal

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;

}

Upvotes: 4

Views: 6630

Answers (7)

Sujan Sundareswaran
Sujan Sundareswaran

Reputation: 2551

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>

Upvotes: 0

Johannes
Johannes

Reputation: 67776

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>

Upvotes: 2

treyBake
treyBake

Reputation: 6560

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)

Upvotes: 2

Doomenik
Doomenik

Reputation: 866

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;
}

Upvotes: 0

Gavin Simpson
Gavin Simpson

Reputation: 2832

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;".

Upvotes: 0

Bernhard
Bernhard

Reputation: 1870

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.

Upvotes: 0

user5014677
user5014677

Reputation: 694

.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.

Upvotes: 0

Related Questions