How to position a block

Question

How to position a block

There is an adaptive structure in which there are 2 blocks: in the first one, the content can be of any height, and in the second one there is an image and a block with the absolute class, which you need to position in the lower right corner of the entire container, regardless of the height of the first block. Sketched fiddle

@import "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css";
@import "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css";

body {
  margin: 10px;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6 relative">
      <img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />
      <p class="absolute">this is sparta</p>
    </div>
  </div>
</div>

How can this be done, and so that at low resolutions, the blocks move 1 under one and the void between the image and the block disappears?

1

html javascript css jquery position

Author: Qwertiy, 2015-09-25

Source

1 answers

score 1 · Answer 1

In general, the only correct option I see is this: assign static positioning to the column block, and relative positioning to the container, respectively-like this link to the feed

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}
.container {
  position: relative;
}
.relative {
  position: static;
}
.absolute {
  position: absolute;
  bottom: 5px;
  right: 0;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .absolute {
    position: absolute;
    bottom: -25px;
    left: 15px;
    margin: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6">
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
      <p>this is sparta</p>
    </div>
    <div class="col-md-6 col-sm-6 relative">
      <img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />
      <p class="absolute">this is sparta</p>
    </div>
  </div>
</div>

.container {
  position:relative;
}
.relative {
  position:static;
}

Thank you for your help - the issue is resolved!