CSS - stack DIV around image

Question

I'm trying to figure out how to display nicely a couple of DIVs next to an image without jumping below that image.

Here is an example: https://codepen.io/anon/pen/zgzXGr

code: code:

body
  {
  background-color:#000;  
}
#shortspecs-section
  {

    margin:10px;
    display:flex;
    flex-flow:column wrap;

  }

.shortspecs
  {
    background-color:#FFF;
    border-radius:10px;
    padding:15px;
    margin:15px;
    font-size: 1.3em;

  }

.specs-small
{
  max-height:60px;

}


@media only screen and (min-width: 1024px) and (max-width: 9999px) 
  {
    #shortspecs-section
      {
        flex-flow:row wrap;
        justify-content:flex-start;
      }

  }

    <section id="shortspecs-section">
       <div class="shortspecs specs-big">
         <img src="https://static.mobilemultimedia.be/mmu/products/no-phone_300.jpg">
       </div>

       <div class="shortspecs specs-small">
          <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
          19999<br>
          <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img align="left" src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
     </section>

I would like the DIVs on the right to stack nicely next to the image instead of jumping immediately below the image. I have tried it with Flexbox and float but I haven't managed to display the divs correctly so far.

I'm sure there is a simple solution but I haven't found it yet.

Any idea?

Thanks

Not sure if this was what you are after: https://codepen.io/anon/pen/OKgYNJ — Pete, Aug 01 '19 at 12:27
@Pete thanks but no, the DIVs need to occupy all the available space, in this example they always occupy the same space. — Laurent, Aug 01 '19 at 12:30

score 2 · Answer 1 · edited Aug 01 '19 at 12:26

try this code

HTML

<section id="shortspecs-section">
  <div class="left">
<div class="shortspecs specs-big">
  <img src="https://static.mobilemultimedia.be/mmu/products/no-phone_300.jpg">
  </div>
  </div>
  <div class="right">
<div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  <div class="shortspecs specs-small">
    <img align="left" src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
    <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
    <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
      <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
      <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
      <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  </div>
</section>

css

body
  {
  background-color:#000;  
}
#shortspecs-section
    {

    margin:10px;
        display:flex;

    }

.shortspecs
    {
        background-color:#FFF;
        border-radius:10px;
        padding:15px;
        margin:15px;
        font-size: 1.3em;

    }

.specs-small
{
  max-height:60px;

}


@media only screen and (min-width: 1024px) and (max-width: 9999px) 
    {
        #shortspecs-section
            {
            }

    }

.left{

}
.right{
  width:100%;
}
.right .specs-small{
  float:left;
}

See example: https://codepen.io/anon/pen/YmQbzR

score 2 · Answer 2 · answered Aug 01 '19 at 12:27

Please try this code..

css

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color:#000;
}
#shortspecs-section {
    margin:10px;
}
.specs-big {
    width: 25%;
    float: left;
}
.small_divs {
    width: 72%;
    float: right;
}
img {
    max-width: 100%;
    height: auto;
}
.shortspecs {
    background-color:#FFF;
    border-radius:10px;
    padding:15px;
    font-size: 1.3em;
}
.specs-small {
  min-height: 90px;
  float: left;
  width: 15%;
  margin-right: 4%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 797px) {
    .specs-big {
        width: 100%;
        margin-bottom: 30px;
    }
    .small_divs {
        width: 100%;
    }
    .specs-small {
        width: 46%;
        margin-right: 7%;
    }
    .specs-small:nth-child(2n+2) {
        margin-right: 0px;
    }
}

HTML

<section id="shortspecs-section">
   <div class="shortspecs specs-big">
     <img src="https://static.mobilemultimedia.be/mmu/products/no-phone_300.jpg">
   </div>

   <div class="small_divs">
   <div class="shortspecs specs-small">
      <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
      19999<br>
      <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img align="left" src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>

   <div class="shortspecs specs-small">
     <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
     19999<br>
     <span class="smallprint">TEST</span>
   </div>
</div>
</section>

score 1 · Answer 3 · answered Aug 01 '19 at 12:20

1

You could put the specs-small together in a div with an set width.

Then you give the .specs-small { width: 90px; display: inline-block;}

see codepen: https://codepen.io/anon/pen/OKgGGe

answered Aug 01 '19 at 12:20

Jeremy

1,384
3
10
24

CSS - stack DIV around image

3 Answers3