CODEWITHSUNDEEP
htmlcsscss-float
Ylama
Ylama

Reputation: 2489

Floating div from left to right to top and bottom where left div sit bottom and right div top

I have 2 divs next to each other and on ipad(portrait) i want the right div to display on top of left div.

Code:

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

Css:

.both {
   width: 100%;
   display: -webkit-inline-box;
}

.left-go-bottom, right-go-top {
   height: 769px;
   width: 50%;
   background-color: darkblue;
}

.main {
  display: block;
  width: 100%;
  height: 769px;
}

The first div class .left-go-bottom is first and wil be on the left the second div class right-go-top is second and wil float on right side.

For my media query at the break point i added.

Css:

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }

}

So it works fine, but the div on the top i need on the bottom and the one currently bottom i need top, i tried floating the top one right and bottom left , did not work, any help please.

Upvotes: 2

Views: 1773

Answers (4)

Ylama
Ylama

Reputation: 2489

Thanks to @MihaiT for the help my problem resolved.

This is my answer that works.

code:

 <div class="main">
  <div class="both">
    <div class="left-go-bottom"></div>
    <div class="right-go-top"></div>
  </div>
 </div>

 <div class="main">
  <div class="both unique-flex">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
  </div>
 </div>

 <div class="main">
  <div class="both">
    <div class="left-go-bottom"></div>
    <div class="right-go-top"></div>
  </div>
 </div>

css:

.main{
    display: block;
    width: 100%;
    height: 769px;
}

.both {
   width: 100%;
   display:-webkit-inline-box;
}

.left-go-bottom,.right-go-top  {
    height: 769px;
    width:50%;
 }


 @media only screen and (max-device-width: 1024px) and
 (min-device-width: 768px) and (orientation: portrait) {

  .left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
  }

  .both {
    display:block;
  }

  .main {
    float: left;
    display: inline-table;
   }

  div.both.unique-flex {
   display: flex;
   flex-direction: column-reverse;
  }
 }

As you can see i made the blocks i want to switch unique to them self and the one on top and bottom used display:block.

Upvotes: 0

Mihai T
Mihai T

Reputation: 17697

you can use display:flex; on .both and then in the media query use flex-direction:column-reverse this will reverse the order of your boxes

i have added background:red to the right-go-top div for example purposes. also changed the media query for the same reason ( it will work the same with your media query )

see snippet below or jsfiddle > jsfiddle flex

let me know if it helps

.both {
   width: 100%;
  display:flex;
}

.left-go-bottom,.right-go-top  {
   height: 769px;
   width:50%;
}
 .left-go-bottom{
   background-color: darkblue;  
}
 .right-go-top{
   background-color: red;  
}

 
@media only screen and (max-width: 768px) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }
 .both {
   flex-direction:column-reverse
 }
}
<div class="both">

   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
</div>

EDIT with new code from OP

OPTION 1 : delete the height from .main . because you have set a fixed height of 769px on the mains content ( right and left div ) so .main will inherit the height from the content .

so it will have an automatic height of 769px when right and left div are on the same line , and will have a height of 769px*2 = 1538 on mobile version . this happens automatically if you don't write a fixed height.

see snippet below with this solution

.both {
   width: 100%;
  display:flex;
}
.main {
  display: block;
  width: 100%;
  /* height:758px removed */ 
}
.left-go-bottom,.right-go-top  {
   height: 769px;
   width:50%;
}
 .left-go-bottom{
   background-color: darkblue;  
}
 .left-go-bottom.green {
   background:green
 }
 .right-go-top{
   background-color: red;  
}
  .right-go-top.yellow{
   background-color: yellow;  
}
@media only screen and (max-width: 768px) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }
 .both {
   flex-direction:column-reverse;
 }
}
<div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

Option B not recommended . but you can set a fixed height on .main , although it's useless because, as i said in the previous solution, .main inherits its height from the two divs that are inside it and that have fixed height of 769px

but if you really want to. you can set height 769px on desktop version, and 1538px when the divs go on different lines. ( their height combined )

see snippet below :

.both {
   width: 100%;
  display:flex;
}
.main {
  display: block;
  width: 100%;
  height: 769px;
}
.left-go-bottom,.right-go-top  {
   height: 769px;
   width:50%;
}
 .left-go-bottom{
   background-color: darkblue;  
}
 .left-go-bottom.green {
   background:green
 }
 .right-go-top{
   background-color: red;  
}
  .right-go-top.yellow{
   background-color: yellow;  
}
@media only screen and (max-width: 768px) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }
 .both {
   flex-direction:column-reverse;
 }
 .main {
     height: 1538px; /* added */
 }
}
<div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom green"></div>
   <div class="right-go-top yellow"></div>
 </div>
 </div>

Upvotes: 2

converset jordan
converset jordan

Reputation: 56

This is pretty ugly because it uses absolute position and this is not responsive, but this does the staff 

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

  .left-go-bottom, .right-go-top {
      width: 100%;
      float: left;
      display: block;
  }

  .left-go-bottom{
      top: 769px;
      position: absolute;
  }

  .right-go-top{
      position: absolute;
      top: 0px; 
  }
}

Upvotes: 0

Fabio Manzo
Fabio Manzo

Reputation: 36

If they don't contain content that can't be doubled, the simplest solution is to create a copy of the right block and hiding or showing it accordingly.

<div class="both">
    <div class="right-go-top show-only-on-iPad-portrait"></div>
    <div class="left-go-bottom"></div>
    <div class="right-go-top hide-on-iPad-portrait"></div>
</div>


<style>
.show-only-on-iPad-portrait {
    display:none;
}
.hide-on-iPad-portrait {
    display:block;
}

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

.show-only-on-iPad-portrait {
    display:block;
}
.hide-on-iPad-portrait {
    display:none;
}

}
</style>

Upvotes: 0

Related Questions