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

CSS

Posted by Udida Roland
Udida Roland
Courses Plus Student 613 Points

Forcing my images into a row

Thanks in advance for any assistance

I want create a parent container with children images I want this images to be in a row without creating a new column. if the images get to the width of the container, instead of creating an overflow, the images should rather create a horizontal scroll bar without moving into the next column.

1 Answer

Kristiana Georgieva
Kristiana Georgieva
14,595 Points
Kristiana Georgieva
Kristiana Georgieva
14,595 Points

Hey. This is what I came up with:

<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>

</html>

.container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;  /* creates the scroll */
}

.child {
  width: 150px;
  height: 150px;
  min-width: 150px;  /* this is to make sure the images never get squished or resized to something smaller than 150px */
  background-color: red;
  border: 2px solid black;
  margin: 20px; 
}

Replace the div's with images and adjust the width and height to what you want.

Good luck!