Why are my gifs so small when I set the width to 32% each?-CodePudding

I want to have these 3 gifs in a row, each taking up a third of the width of the page. but when I look at the page, they are tiny. I set the divs to 32% each and the gifs should take up 100% of their div. this is my code:

<div id="3wizards" width=100% style= "float:center">
  <div id="w1" width=32% style="float:left">
    <img src="wizard(1).gif" width=100%>
  </div>
  <div id="w2" width=32% style="float:left">
   <img src="wizard(1).gif" width=100%>
  </div>
  <div id="w3" width=32% style="float:right">
   <img src="wizard(1).gif" width=100%>
  </div>
</div>

what the page looks like: Image of the page, the three wizard gifs are tiny.

(I understand that I could just remove the difs, but what if I want to have text in one of the thirds in the future? I'm pretty sure need the difs for that, so I want to get it to work with the divs now so I can use it in the future.)

CodePudding user response：

Hi Anura have a look at the below code. First, wrap the code with the main wrapper and use the flex to align in the same row.

<div >
   <div id="w1" >
     <img src="wizard(1).gif" width=100%>
   </div> 
   <div id="w2" >
    <img src="wizard(1).gif" width=100%>
   </div>
   <div id="w3" >
    <img src="wizard(1).gif" width=100%>
   </div>
</div>

CSS:

.gif-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.gif-wrapper .gif {
    width: calc(100% / 3 - 30px);
    margin: 0 15px;
}

Use media query for responsive devices

CodePudding user response：

Use flex for fix that:

<div id="3wizards" width=100% style="display: flex;gap:2%;">
  <div id="w1" width=32% height=100%>
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
  <div id="w2" width=32%>
   <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
  <div id="w3" width=32%>
   <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
</div>