CODEWITHSUNDEEP
htmlcss
Karan Singla
Karan Singla

Reputation: 39

2 different divs start from the same point. Why isn't 2nd one below the other one?

I have been trying to place 2 different divs one after the another but they seem to be starting from the same point for some reason. Doesn't div divide that area of web page ?

<div class = "part1">
   <div id = "p1left"> something </div>
   <div id = "p1right"> something </div>
</div>

<div class = "part2">
   <div id = "p2left"> something </div>
   <div id = "p2right"> something </div>
</div>

while my css code is something like this :-

.part1, .part2 {
   position:relative;
}
#p1left, #p2left {
   float:left;
}
#p1right,#p2right {
   float:right;
}

Why is like 2nd div part of the first one? how do I put first before 2nd?

Upvotes: 0

Views: 505

Answers (6)

caldera.sac
caldera.sac

Reputation: 5088

Without using position attribute, you can do it like this.

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
       div.divone{
       	width: 300px;
       	height: 300px;
       	background-color: orange;
       }

        div.divtwo{
       	width: 300px;
       	height: 300px;
       	background-color: yellow;
       }

      div.divone, div.divtwo{
      	float:left;
      }

	</style>
</head>
<body>
  <div class="divone"></div>
  <div class="divtwo"></div>
</body>
</html>

Or if you want to use with position attribute, you can do it by giving the position only to your second div like this

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
	body{
		margin: 0;
	}
       div.divone{
       	width: 300px;
       	height: 300px;
       	background-color: orange;
       }

        div.divtwo{
       	width: 300px;
       	height: 300px;
       	background-color: yellow;
       	position: absolute;
       	top: 0px;
       	left: 300px;
       }



	</style>
</head>
<body>
  <div class="divone"></div>
  <div class="divtwo"></div>
</body>
</html>

Upvotes: 0

Shashank
Shashank

Reputation: 2060

Please find below, the updated HTML and CSS

HTML

<div class="part1">
    <div id="p1left"> something 1</div>
    <div id="p1right"> something 2</div>
</div>
<div class="clearfix"></div>
<div class="part2">
    <div id="p2left"> something 3</div>
    <div id="p2right"> something 4</div>
</div>

CSS

.part1, .part2 {
   position:relative;
}
#p1left, #p2left {
   float:left;
}
#p1right,#p2right {
   float:right;
}
.clearfix {
  clear: both;
}

Upvotes: 0

Shyam
Shyam

Reputation: 792

Use this css

.part1:after, .part2:after{
  content: "";
  display: table;
  clear: both;
}

OR add a new class something like .clearfix to both div and use below css:

.clearfix:after{
  content: "";
  display: table;
  clear: both;
}

Upvotes: 1

Gokulakrishnan S
Gokulakrishnan S

Reputation: 39

Try this one

.part1, .part2 {
   float:left;
}
#p1left, #p2left {
   float:left;
   margin:5px;
}
#p1right,#p2right {
   float:left;
   margin:5px;
}

https://jsfiddle.net/xre9j6k2/

Upvotes: 0

ihimv
ihimv

Reputation: 1494

Update your CSS to 

.part1, .part2 {
   position:relative;
   clear:both;
}

clear:both property removes the Left and right floating elements and ensures that the next div comes below the previous div.

Working Fiddle Here

Upvotes: 1

A-Ace
A-Ace

Reputation: 51

Use clear in css to make the div appear alone horizontally 

clear:both;

Upvotes: 0

Related Questions