How to center a div and gather others

Navigation
0

I have some divs and the image is not next to the video that is how I want it and also the imgagen instead of going out on the left. He has gone to the right. I also want to separate the box with the bottom one a bit and there is no way.

and that is responsive (that I think if I do it well) I attach my code, thanks in advance! 

     .caja {
         width: 100%;
         float: left;
         overflow: hidden;
         text-align: center;
     }
     
     .foto img {
         width: auto;
         height: 100%;
         float: left;
         max-height: 393px;
         overflow: hidden;
     }
     
     .foto{
         display:inline-block;
     }
      .video {
         width: 70%;
         float: left;
         overflow: hidden;
          display:inline-block;
     }
<div class="caja">
   <div class="foto">
       <img src="images/0003fantasia.jpg">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="images/0001-pantallazo.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

<div class="caja">
   <div class="foto">
       <img src="images/0012-recorte.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
    
asked by Basicmix 23.07.2018 в 12:00
source

4 answers

0

What you have to do is put float:left; in div .foto and not in the image, and that div give a width small enough to fit next to the video, as in video you have 70% 30% in .foto ; I have also deleted the float:left; of .caja and .video because they are not necessary, here is your example with those changes: 

.caja {
         width: 100%;
         overflow: hidden;
         text-align: center;
     }
         
/* CODIGO AÑADIDO */         
.foto {width:30%;display:inline-block;float:left;}
     
     .foto img {
         width: 100%;
         height: 100%;
         max-height: 393px;
         overflow: hidden;
     }
     
      .video {
         width: 70%;
         overflow: hidden;
         display:inline-block;
     }
<div class="caja">
   <div class="foto">
       <img src="https://picsum.photos/600/480/?random">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://picsum.photos/600/480/?random">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://picsum.photos/600/480/?random">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
    
answered by 23.07.2018 в 13:51
0

To align and be responsive it is not necessary to use float , since you have the divs placed in the order in which you want them to appear, the only thing you need is to indicate that they will be shown online and apply percentages that never add up more than 100%.

To separate between box elements I have added the upper and lower margin to the element with margin .

And finally the image I have aligned vertically to the top and I have put a maximum width of 100% so that if it is large it is complete and not hidden behind the video. But this will depend on the effect and position you want for your images. 

.caja {
   width: 100%;
   overflow: hidden;
   text-align: center;
   margin: 20px 0;
}
.caja div {display: inline-block;}
     
.foto { width: 28%; margin-right:1%; vertical-align: top;}
.foto img {
   width: auto; max-width:100%;
   height: 100%;
   max-height: 393px;
   overflow: hidden;
}
     
.video {
   width: 70%;
   overflow: hidden;
}
<div class="caja">
   <div class="foto">
       <img src="https://cdn.pixabay.com/photo/2018/07/19/19/28/the-alps-3549245_960_720.jpg">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://cdn.pixabay.com/photo/2018/07/19/19/28/the-alps-3549245_960_720.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

<div class="caja">
   <div class="foto">
       <img src="https://cdn.pixabay.com/photo/2018/07/19/19/28/the-alps-3549245_960_720.jpg">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
    
answered by 23.07.2018 в 14:42
0

If you want to align it, you can use flexbox, as recommended above and to separate the boxes using margin or padding and you have several methods so that the image is not distorted.

I leave you 3 examples, check all, but above all the last one that is what I think you want:

Objet-fit: COVER 

.caja {
         width: 100%;
         text-align: center;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         margin-bottom: 1em;
     }
     
     .foto, .video{
         display:inline-flex;
         vertical-align: top;
     }
     
     .foto{
         width: 30%;
     }
     
      .video {
         width: 70%;
     }
     
     .foto img {
         width: 100%;
         height: auto;
         max-height: 393px;
         object-fit: cover;
     }
<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/900/450">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/901/451">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/902/452">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

Object-fit: contain 

.caja {
         width: 100%;
         text-align: center;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         padding-bottom: 1em;
     }
     
     .foto, .video{
         display:inline-flex;
         vertical-align: top;
     }
     
     .foto{
         width: 30%;
     }
     
      .video {
         width: 70%;
     }
     
     .foto img {
         width: 100%;
         height: auto;
         max-height: 393px;
         object-fit: contain;
     }
<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/900/450">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/901/451">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/902/452">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

Make it responsive

Depends on the result you want to get, now for the responsive, I do not know if the best way is to keep the image on the mobile side because as you see or cut or shrinks too much, it is best to use a half querie that in Desktop behaves as you need and on mobile the image occupies the entire width or only half. 

.caja {
   width: 100%;
   margin: auto;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content:  center;
   padding-bottom: 1em;
 }

 .foto, .video{
   display:inline-flex;
   vertical-align: top;
   width: 100%;
   max-width: 700px;
 }

 .foto img {
   width: 100%;
   height: auto;
   max-height: 393px;
   object-fit: cover;
 }
 
 @media (min-width: 960px){
   .foto{
       width: 30%;
       max-width: initial;
   }

    .video {
       width: 70%;
   }
 }
<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/900/450">
   </div>
    <div class="video">
        <iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/901/451">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
  </div>
</div>

<div class="caja">
   <div class="foto">
       <img src="http://picsum.photos/902/452">
   </div>
    <div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

I do not know if it's the same responsive effect you want, put your comment to verify what would be the best option.

    
answered by 23.07.2018 в 18:21
-1

You have tried to use bootstrap is a library that makes it very easy the problem you pose and is very easy to include in your project.

How to implement bootstrap in your project:

link

    
answered by 23.07.2018 в 12:31
Laravel middleware method or code in android to know if the call went to voicemail