CODEWITHSUNDEEP
htmlcss
user63762453
user63762453

Reputation: 1734

How to place a div right below another div?

The HTML is:

<div class="first">
    This is first div. This is first div
    </br>
    </br>
    </br>
    </br>
    </br>
    end
</div>
<div class="second">
    Second starts after first</br>When page is scrolled.
</div>

CSS part is:

.first {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background-color:#000;
    opacity:0.5;
    color:#fff;
}
.second {
    background-color:#F00;
    opacity:1;
    position:absolute;
    left:0px;
    width:100%;
    height:600px;
}

I want the second div to be placed after the first one. The first <div> would take up full height. That's the reason I have used position: absolute.

Also, I don't want to write something like top:600px; in second div's CSS, because when the window height reduces, white space is introduced between the two divs.

How to I make it start right after the first div, whatever the screen resolution?

Here is the fiddle: http://jsfiddle.net/v8xUL/457/

Upvotes: 0

Views: 103

Answers (3)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

If you are looking to make the two divs appear full height and also they should be next to each other, you need to set the height of the previous div (100%) as the next div's top. You need to give top: 100% for your second div instead. Check this out:

.first {
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  background-color:#000;
  opacity:0.5;
  color:#fff;
}
.second {
  background-color:#F00;
  opacity:1;
  position:absolute;
  left:0px;
  width:100%;
  height:600px;
  top: 100%;
}
<div class="first">
  This is first div. This is first div
  <br />
  <br />
  <br />
  <br />
  <br />
  end
</div>
<div class="second">
  Second starts after first</br>When page is scrolled.
</div>

Upvotes: 4

Nick
Nick

Reputation: 3281

Remove position:absolute;
Fiddle

body{margin:0;}
.first {
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.5;
    color:#fff;
}
.second {
    background-color:#F00;
    opacity:1;
    position:absolute;
    left:0px;
    width:100%;
    height:600px;
}
<div class="first">
    This is first div. This is first div
    <br />
    <br />
    <br />
    <br />
    <br />
    end
</div>
<div class="second">
    Second starts after first<br />When page is scrolled.
</div>

And it's either <br> or <br/>

Upvotes: 1

Aaron
Aaron

Reputation: 10430

Remove the position: absolute; 

body {margin: 0;}
.first {
    width:100%;
    background-color:#000;
    opacity:0.5;
    color:#fff;
}
.second {
    background-color:#F00;
    opacity:1;
    width:100%;
    height:600px;
}
<div class="first">
    This is first div. This is first div
    </br>
    </br>
    </br>
    </br>
    </br>
    end
</div>
<div class="second">
    Second starts after first</br>When page is scrolled.
</div>

Upvotes: 0

Related Questions