Positioning two blocks in absolute position for desktop and relative position for mobile using CSS or Jquery

debugcn Published at Dev

user1502071

I am trying to perform the below task as shown in the image. I tried with css coding and failed to this. Is it possible with CSS, if not how to achieve this task with jquery.

For desktop : I am trying Block 1 and block 2 are in absolute position to container, while block 2 position relative to block 1 with height auto. Block 3 position relative to container.

For Mobile In the mobile view I want only block 1 in the absolute bottom position of the container and block 2 and block 3 position relative to container as shown in the picture.

I want to perform this task using CSS

<style>
.container{
    width:100%;
    min-height:768px;
    height:auto;
    margin:0;
    padding:0;
    top:0;
    left:0;
    position:absolute;
    display:block;
    background:#666;
}
.b-50{
    width:50%;
}
.pinned1{
    background:#888;
    float:right;
    display:block;
    padding:20px;
    height:auto;
    color:#FFF;
}
.pinned2{
    background:#888;
    position:relative;
    display:block;
    float:right;
    color:#FFF;
    padding:20px;
    height:auto;
}
.block3{
    display:block;
    height:auto;
    position:relative;
    margin-top:auto;
    top:100%;
}
@media all and (max-width: 767px){
.b-50{
    width:100%;
}
.pinned2{
    position:absolute;
    top:100%;
}

}
</style>
<div class="container">
          <div class="b-50 pinned1">
              <h1>Block 1</h1>
          </div>    
          <div class="b-50 pinned2">
              <h2>Block 2</h2>
          </div>
</div>
<div class="block3">
    <h3>Block 3</h3>
</div>

Demo JSFIDDLDE

roo2

a pure CSS solution is a tough problem because you want to make it appear as if the nesting of elements has changed!

It can be accomplished by relying on the fact that floating elements dont affect their parents height unless there is a clear:both element below them (the clearfix ). We then make the parent ignore the height of the second child on the mobile site.

<div class="container">
   <div class="box1"> </div>    

   <div class="clear-mobile"></div>

   <div class="box2"> </div>    

   <div class="clear-desktop></div>
</div>

css:

/* for desktop */
.clear-desktop{
    clear: both;   
}

@(max-width: 767px)

  .box2{
    margin-top: 40px;
  }
  .clear-mobile{
    clear: both;
  }
  .clear-desktop{
    clear: none;   /* now container will ignore .box2's height! */
  }
}

posible with css only!

http://jsfiddle.net/b5Kyy/2/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-06-23

Comments

0 comments

From Java

Related Related

Article