how to make two div beside each other

user_3516993 0
Viewed 31

I want to make two div beside each other on desktop width, on mobile version it works fine, they are bellow each other but when I try to make my browser behavior on desktop size and try to change the first div on float left it disappear and not work, any help please ?

.sgpb-main-html-content-wrapper{
text-align:center !important;
}
.column1{
 background-image: url('http://wohnwagen-mieten.at/wp-content/uploads/2021/06/woman.jpg');
background-repeat: no-repeat;
background-size: cover;
height:320px !important;
}
.column2{
height:250px !important;
}

#sgpb-popup-dialog-main-div{
padding: 0 !important;
max-width:350px !important;
width:310px !important;
padding:0 !important;
border-radius: 0 !important
}

.sgpb-popup-dialog-main-div-theme-wrapper-6{
left:0 !important;
top:85px !important;
}

.dummytext{
color: white;
font-size: 30px;
font-weight: bolder;
line-height: 35px;
text-align: center;
padding-top: 20px;
}

.column2 > p {
margin: 0 !important
}
<div class="row">
 <div class="column1" style="background-color:red;">

</div>
 <div class="column2" style="background-color:blue;">
    <h4 class ="dummytext" style="margin: 0 !important"> Mietwagen-Preisvergleich
      Deutschlands</h4>
<div class="action-btn">
 <img class="size-full wp-image-1658 aligncenter" src="https://www.mietwagen-ticker.de/wp-content/uploads/2021/05/autoeurope.jpg" alt="" width="100" height="71" />
    <span data-href="https://clkde.tradedoubler.com/click?p=300883&a=3040124&g=24628776"   class="BUTTON_NZV" style="border-radius: 7px;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 31px;
    font-weight: 600;

    background-color: #1BC325;
    text-decoration: none;

    cursor: pointer;
    text-align: center;
    min-width: 80%;

" onclick="window.open('#','_blank');window.open(this.getAttribute('datahref'),'_self');">OK</span>
</div>
 </div>
</div

responsive-design mobile browser css html
1 Answers

The issue you are seeing (column1 disappearing) is most likely because it has no contents.

Below is a fix using a flexbox, and setting flex: 1 on both column divs so that they both take an equal width inside the .row div.

I added a media query so that the flexbox is only applied on desktop screens:

//set maximum width allowed for the columns
.column1, .column2 {
  max-width: 350px;
}


@media(min-width: 720px) {
  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .column1, .column2 {
    flex: 1;
  }
}

Demo:

.sgpb-main-html-content-wrapper{
text-align:center !important;
}
.column1{
 background-image: url('http://wohnwagen-mieten.at/wp-content/uploads/2021/06/woman.jpg');
background-repeat: no-repeat;
background-size: cover;
height:320px !important;
}
.column2{
height:250px !important;
}

#sgpb-popup-dialog-main-div{
padding: 0 !important;
max-width:350px !important;
width:310px !important;
padding:0 !important;
border-radius: 0 !important
}

.sgpb-popup-dialog-main-div-theme-wrapper-6{
left:0 !important;
top:85px !important;
}

.dummytext{
color: white;
font-size: 30px;
font-weight: bolder;
line-height: 35px;
text-align: center;
padding-top: 20px;
}

.column2 > p {
margin: 0 !important
}

.column1, .column2 {
  max-width: 350px;
}

@media(min-width: 720px) {
  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .column1, .column2 {
    flex: 1;
  }
}
<div class="row">
 <div class="column1" style="background-color:red;">

</div>
 <div class="column2" style="background-color:blue;">
    <h4 class ="dummytext" style="margin: 0 !important"> Mietwagen-Preisvergleich
      Deutschlands</h4>
<div class="action-btn">
 <img class="size-full wp-image-1658 aligncenter" src="https://www.mietwagen-ticker.de/wp-content/uploads/2021/05/autoeurope.jpg" alt="" width="100" height="71" />
    <span data-href="https://clkde.tradedoubler.com/click?p=300883&a=3040124&g=24628776"   class="BUTTON_NZV" style="border-radius: 7px;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 31px;
    font-weight: 600;

    background-color: #1BC325;
    text-decoration: none;

    cursor: pointer;
    text-align: center;
    min-width: 80%;

" onclick="window.open('#','_blank');window.open(this.getAttribute('datahref'),'_self');">OK</span>
</div>
 </div>
</div

user_76928590
Related