CODEWITHSUNDEEP
htmlcss
Russell
Russell

Reputation: 1804

Mess with content height

I want to add two div one after another. Though position relative works fine. But why this happen without position. Is it possible do that without position.

Here is html part:

<div class="content1">
    Lorem Ipsum is simply dummy text
<div>
<div class="content2">
    Lorem Ipsum is simply dummy text
<div>

And CSS Part:

.content1{
    width: 100%;
    height: 400px;
    border: 1px solid black;
}
.content2{
    width: 100%;
    height: 300px;
    border: 1px solid red;
}


.content1{
	width: 100%;
	height: 400px;
	border: 1px solid black;
}
.content2{
	width: 100%;
	height: 300px;
	border: 1px solid red;
}
<div class="content1">
  Lorem Ipsum is simply dummy text
 <div>
<div class="content2">
  Lorem Ipsum is simply dummy text
<div>

Upvotes: 0

Views: 100

Answers (3)

Aatif Bandey
Aatif Bandey

Reputation: 1145

Close your div tags

<div class="content1">Lorem Ipsum is simply dummy text</div>
<div class="content2">Lorem Ipsum is simply dummy text</div>

Upvotes: 1

Luka Kerr
Luka Kerr

Reputation: 4239

Simply close your <div> tags

.content1 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  
}
.content2 {
  width: 100%;
  height: 300px;
  border: 1px solid red;
}
<div class="content1">
  Lorem Ipsum is simply dummy text
</div>
<div class="content2">
  Lorem Ipsum is simply dummy text
</div>

Upvotes: 2

A. Vidor
A. Vidor

Reputation: 2550

You are not closing your <div>s correctly.

To close a <div> block, use </div>. Like this:

<div class="content1">
  Lorem Ipsum is simply dummy text
</div> <!-- Changed -->
<div class="content2">
  Lorem Ipsum is simply dummy text
</div> <!-- Changed -->

Upvotes: 4

Related Questions