Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted February 5, 2017 3:28pm by

How do I float three images in a row?

I did that before with bootstrap, but now I want to learn it without bootstrap. I was reviewing the video of Nick in the "How to make a website" course and tried different css codes but couldn't solve it.

Now there are two pictures besides each other on the left side of the viewport. The third one is a row below them on the left. I want to float the three img's on the same row. Can someone help with this?

https://w.trhou.se/okztdq9mze

2 Answers

February 8, 2017 11:13am

You want a row but your flex-direction is column. Flex-grow causes the img to grow to fill the available space, not be evenly distributed. Three images in a row

.container {
    display: flex;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    flex-flow: row; /* or flex-direction (flow allows you to specify as a sub-value whether to wrap or not */
    justify-content: space-around; /* put an even amount of space around each object */
    align-items: center; /* align each object in the center of the parent elements y axis */
}

.container img {
    flex: 0 1 30%; /* 0 = don't grow to fill space / 1 = please shrink if need be / set object 30% of viewport width */
}

February 9, 2017 9:26am

Thanks Kyle, it's a relief that it workes now :) I thought in the direction of a with as well and tried that in a code, but then the images didn't line up like now.

February 10, 2017 12:07pm

Yes sure, I would gladly accept your help with the CSS file. :) I implemented the code's. The image's are in line now. Thanks!

February 10, 2017 4:32pm

That's awesome. I'm glad it helped.

Here is a basic change to what you had posted originally - the snapshot. Mostly just redundancies and extraneous code removed, but there were a few tweaks as well, but still your code overall. I hope this helps you. Have a great day!

/* FYI: I added my own photo's and logo to edit this. So the dimension for the logo might not suit your particular img.  */

html,
body {
    margin: 0;
    padding: 0;
    font-family: serif, monospace;
    line-height: 1;
    font-size: 100%; /* I used % to stay with your style (I prefer px and occasionally em's) */
    color: #000;
    font-weight: 500;
}

:before, 
:after {
    box-sizing: border-box;
}

/* universal settings */
ul {
    list-style-type: none;
}

ul li {
    display: inline-block;
}

/* header section */
header {
    background: linear-gradient(#7FCED4, #ffffff);
    width: 100%;
    height: 140px;
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid green; /* make sure to specify thickness, you dont want to leave control to the browser */
}

nav {
    margin: -21px 15px 10px -25px;
    padding-bottom: 3px;  
    font-size: 125%;
}

nav li {
    margin: 0 7px; 
}

nav li a {
    text-decoration: none;
}

nav li a:hover {
    color: #00AF33;
}

/* button1 logo && button2 sub-section */
.fancy { /* class added to the ul to position in the center of viewport */
    text-align: center;
}

.Logo {
    border-radius: 20px;
    margin-left: 15px;
    margin-right: 15px;
    width: 70px;
}

.button1,
.button2 {
    display: inline-block;
    width: 200px;
    height: 60px;
    position: relative;
    border: 2px solid green;
    border-radius: 5px;
    background-color: green;
    text-align: center;
}

.button1 {
    margin-right: 15px;
}

.button2 {
    margin-left: 15px;
    margin-right: 32px;
}

.content {
    display: inline-block;
    position: absolute;
    bottom: 6px;
    right: 1px;
    width: 100%;
    height: 100%;
    background-color: #09f;
    color: #fff;
    text-transform: uppercase;
    line-height: 60px;
    border-radius: 5px;
    transition: all 0.1s linear;
}

.button1:active span,
.button2:active span {
    bottom: 0;
    background-color: lightgreen;
    box-shadow: 0 0 0 #90EE90; /* no dimensions makes this irrelevant */
}

.button1:hover .content,
.button2:hover .content {
    background-color: lightgreen;
    box-shadow: 0 0 0 #90EE90; /* ditto for this one */
}

/* main body */
h1 {
    text-align: center;
    color: #00AF33;
    text-emphasis-color: white;
    font-size: 375%;
    text-align: center;
    padding-top: 120px;
}

section {
    margin: 75px 0;
    text-align: center; /* position the images in viewport */
}

 section img {
    max-width: calc(100vw / 3.5); /* the higher the number the smaller the images will be */
    margin: 10px 10px;
}

#index {
    margin: 80px auto;
    height: 900px;
}

#Symptomen {
    background-color: green;
    border-radius: 10px;
}

/* add your three images Lung, sleep and burnout in a separate section just below the one you currently have and apply the class 'img' to the whole section. After you do that, preview the page in your workspace. Notice how the margins on either side of the original ul grouped photos aren't quite lined up with the ones from this new section? This is how the bulletpoint will impact your alignment */

.img {
    width: 100%;
    text-align: center;
}

.img img {
    width: calc(100vw / 3.5); /* 3.5 is basically the same as 29% */
    margin: 10px 10px;
}

February 6, 2017 6:16am

Hi, I did what you said in the first two sentences. But I still can't get the images centered on one line.

I also tried flexbox and read up in CSS tricks. This should be simple. I have this code:

.container, .burnout, .lung, .sleep { display: inline-flex; flex-direction: column; max-width: 100%; flex-grow: 1; }

.item { flex-grow: 1; }

With flex-grow the space should be distributed evenly, but i can't get it to work.

https://w.trhou.se/qdg4bma7ix

February 9, 2017 1:14am

Steven, The reason for that is using %'s on the image within the li. You have to specify a fixed width in this case.

ul {
    list-style-type: none;
}

li {
    display: inline-block;
}

li img {
    max-width: 400px; /* %'s will resize the image but it will not work with the li being inline-block to display on one line.*/ 
    margin: 10px;
}

edited.....set max-width: 400px; instead of percentage. I originally put width: 400px; (or whatever size) it just has to be a unit. The unit-less percentage doesn't resolve the issue, as you stated.

February 9, 2017 4:10pm

/* Not a problem at all. I'm glad to help and I appreciate that you're taking the time to learn it without a framework. If
you're interested, I took some time and made a CSS file for your project. I kept most of what you wrote, but cleaned up
the extraneous parts saving you about 30 lines of code. Let me know if you're interested in looking at it and I will attach it
to another comment.

Whether you want to see the file, or not, I'd like to make a note on your three images. I'm sure at this point they were
trying to teach the use of an un-ordered list, but I haven't come across this before, myself. With using the list to put three
images on a line you end up writing more code and the another  thing would be trying to center three images without
extra code to compensate for the bullet point, even though it isn't displayed, the space is still there and will offset the
images from the viewports center (i forget how many and it might vary between browsers, but its around 10px give or
take, but you can use the console to see how many px margin one side has vs the other too.)
Three images all by themselves with no list */

/* put the pics in a <div> or <section> then set its width and where you want the child elements to go */
.img-section {
    width: 100%;
    text-align: center;
}

/*  give the images a non-unit width or a max-width so they will resize and then give them a gutter between, cause it looks nice */
.img-section img {
    width: 29%;
    margin: 10px 10px;
}


/* As opposed to using the list.  You have several ul's in the document and so I did a universal property setting for all ul's at the top of the CSS file. 
Three images in a list. */


/* universal settings */
ul {
    list-style-type: none;
}

ul li {
    display: inline-block; 
}

/* whole bunch of CSS code between */

section {
    margin: 75px 0; /* will be off-center a hair because of bulletpoint, but is fixable */
    text-align: center; /* position the images to center in viewport */
}

 section img { /* set all three images in one go */
    max-width: calc(100vw / 3.5); /* the higher the second number the smaller the images will be */
    margin: 10px 10px;
}

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Learning coding

Learning coding

How do I float three images in a row?

2 Answers

Kyle Jensen

Kyle Jensen

Learning coding

Learning coding

Learning coding

Learning coding

Kyle Jensen

Kyle Jensen

Learning coding

Learning coding

Kyle Jensen

Kyle Jensen

Kyle Jensen

Kyle Jensen