0

i have two div, see plunker:

<div class="box" style="position:absolute;bottom:0px;background-color:blue">mk</div>
<div class="box" style="position:relative;top:0px;background-color:red">mk1</div>

and css:

.box{
  width:200px;
  height:400px;
  text-align:center;
  background-color:red;

}

i want to put first div in bottom of the page and second div in top of the page.positioning is working using this code.but second div(top div) wrap the first div(which is in bottom).i want that both div should show without overlapping.i don't know how is it possible.please suggest me how is it possible?

Mukund Kumar
  • 21,413
  • 18
  • 59
  • 79
  • I feel like your plunker is showing me exactly what you want. could you add an image or something to show what you want to achieve? – Goos van den Bekerom Nov 06 '14 at 10:28
  • Both divs have a height of 400px. What do you want to happen when the window is less than 400px in height? Do you want scroll-bars, or do you want the divs to be shrunk to fit? – Chris Lear Nov 06 '14 at 10:28
  • if window size is 768px and i assign height 500px to each.then it overlaps.both div should be height 500px and scroll shold be appear. – Mukund Kumar Nov 06 '14 at 11:04

4 Answers4

1

Try this;

.box{
    background-color: red;
    height: 400px;
    text-align: center;
    width: 200px;
 }

 .wrapper {
     position: relative;  
 }
Burak Erdem
  • 19,630
  • 7
  • 36
  • 56
bhavesh vala
  • 873
  • 7
  • 14
0

like a header and footer with no content in the middle? You'll have to use absolute/fixed positioning. They will overlap if the page becomes too small vertically, however you can then use vertical media queries to set the bottom one relative. Or use some javascript.

I've switched them round, to have the first div at the top. Makes more sense, unless you can't do it this way? http://jsfiddle.net/xbsh1kw0/

    .box{
      width:200px;
      height:100px;
      text-align:center;
      background-color:red;

    }

    .box1 {
        background-color: blue;
        position:relative;
        top:0px;
    }
    .box2 {
        position:absolute;
        bottom:0px;
        background-color:red
    }
    @media (max-height: 200px) {
        .box2 {
            position: relative;    
        }
    }
evu
  • 1,031
  • 2
  • 10
  • 29
  • when you increase height to 500px.then it overlaps. – Mukund Kumar Nov 06 '14 at 10:44
  • The height of the elements? Sure it will, this is just for example. If you set the boxes 500px hight, you'd have to change the media query to 100px high. – evu Nov 06 '14 at 10:48
  • You've set it to 100px, not 1000px. The media query has to be double whatever the height of your divs are. It's saying, "when the screen height is small enough that the two touch, make the bottom one relative so it doesn't overlap". – evu Nov 06 '14 at 11:12
  • in that case first div in the top and 2nd div in bottom.but i want just reverse. – Mukund Kumar Nov 06 '14 at 11:16
  • So you want the bottom one at the top? Is there a reason? Can you not touch the html or something? If that's the case, you'd probably have to use javascript to do this. Or get funky with positioning, setting it's position to the the height of the other div from the top. – evu Nov 06 '14 at 11:20
0

For this to work the parent/wrapper of the divs needs to have a height set and have it's position set to relative.

e.g.

.wrapper {
  position: relative;
  height: <some value>;
}

In your case if you want the parent to be a 100% of the height of the screen you'll need to get that set up first. This question on here should help with that CSS Div stretch 100% page height

Hope that helps.

Community
  • 1
  • 1
colmjude
  • 194
  • 1
  • 8
0

i got this using this code :

<div style="overflow: scroll;">
      <div class="box" style="position:static;bottom:0px;background-color:blue">mk</div>
      <div class="box" style="position:static;top:0px;background-color:red">mk1</div>
</div>
Mukund Kumar
  • 21,413
  • 18
  • 59
  • 79