Question 413632 in CSS Question posted in
Some basic documentation can be found here.

Css – Problem regarding arranging divs in a row

I’m trying to arrange a set of divs that look like this:

<div class="productionList">
   <div>
       <img>
       <progress>
   </div>
</div>

inside of a larger div (.productionList)
but no matter what i try they each get their own line:

[img] [progress] [img] [progress]
…

although i want it to look like this:
[—img–][—img–][—img–][—img–][—img–][—img–]…
[progress][progress][progress][progress][progress][progress]…
(wrap once it reaches end of container)
[—img–][—img–] [progress][progress]

This is what my css code looks like:

.productionList {
    border: 1px solid white;
    width: 100%;
}

.productionList div {
    width: 40px;
}

.productionList div img {
    width: 100%;
}

.productionList div progress {
    width: 100%;
}

any idea what’s going on or how to fix this?

for reproduction

<style>


.productionList {

    border: 1px solid white;

    width: 100%;

}



.productionList div {

    width: 40px;

}



.productionList div img {

    width: 100%;

}



.productionList div progress {

    width: 100%;


}
</style>

<div class="productionList">

   <div>

       <img>

       <progress>

   </div>

   <div>

       <img>

       <progress>

   </div>

   <div>

       <img>

       <progress>

   </div>

</div>
Tags:

2

Answers


  1. 0

    To get the children <div> of .productionList aligned horizontally, you’ll want to use display: flex;. flex-wrap: wrap; wraps them to the next line.

    You can learn more about them from W3Schools.

      .productionList {
  border: 1px solid white;
  width: 100%;
  /* Use Flex */
  display: flex;
  flex-wrap: wrap;
}

.productionList div {
  width: 40px;
}

.productionList div img {
  width: 100%;
}

.productionList div progress {
  width: 100%;
    <!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="productionList">
    <div>
      <img>
      <progress>
        </div>
        <div>
          <img>
          <progress>
        </div>
        <div>
          <img>
          <progress>
        </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    You need a display: inline-block; inside your divs that contain the image and the progress:

    .productionList {

    border: 1px solid white;

    width: 120px;
    
}


.productionList > div {

    width: 50px;
    display: inline-block;

}



.productionList div img {

    width: 100%;

}



.productionList div progress {

    width: 100%;


}
    <div class="productionList">

   <div>

       <img>

       <progress>

   </div>

   <div>

       <img>

       <progress>

   </div>

   <div>

       <img>

       <progress>

   </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search