CODEWITHSUNDEEP
htmlcss
shklaurant
shklaurant

Reputation: 69

CSS text element destroys div positioning

I'm working on webpage and divided it into several divs before adding text in it.

but when i put some text in one of that divs, all divs position just collapses.

I've made simple code to show the problem.

html{
  height: 100%;
}

body{
  height: 100%;
}

#wrapper{
  height: 100%;
}

.box{
  display: inline-block;
  position: relative;
  background: black;
}

#box-1{
  top: 5%;
  left: 5%;

  height: 35%;
  width: 35%;
}

#box-2{
  top: 5%;
  left: 10%;

  height: 35%;
  width: 50%;
}

#box-3{
  top: 10%;
  left: 5%;

  height: 50%;
  width: 35%;
		}

#box-4{
  top: 10%;
  left: 10%;

  height: 50%;
  width: 50%;
}
<!DOCTYPE html>
<html>
<head>
	<title>Issue</title>
</head>
<body>
	<div id="wrapper">
		<div id="box-1" class="box">
			
		</div>
		<div id="box-2" class="box">
			
		</div>
		<div id="box-3" class="box">
			
		</div>
		<div id="box-4" class="box">
			
		</div>
	</div>
</body>
</html>

As you can see, it is divided well without problem(at least in my opinion)

But as soon as you add the text in the div, it just collapse and I can't see why.

html{
  height: 100%;
}

body{
  height: 100%;
}

#wrapper{
  height: 100%;
}

.box{
  display: inline-block;
  position: relative;
  background: black;
}

#box-1{
  top: 5%;
  left: 5%;

  height: 35%;
  width: 35%;
}

#box-2{
  top: 5%;
  left: 10%;

  height: 35%;
  width: 50%;
}

#box-3{
  top: 10%;
  left: 5%;

  height: 50%;
  width: 35%;
}

#box-4{
  top: 10%;
  left: 10%;

  height: 50%;
  width: 50%;
}

p{
  color: white;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="wrapper">
		<div id="box-1" class="box">
			<p>Hi</p>
		</div>
		<div id="box-2" class="box">
			
		</div>
		<div id="box-3" class="box">
			
		</div>
		<div id="box-4" class="box">
			
		</div>
	</div>
</body>
</html>

It collapses whether p tag exists or not.

Divs are positioned with %unit and it is relative.

So it should be relevent only to it's parent and brothers in my thought.

Should I reallocate all of them with absolute position?

If you know why, or have solution, please teach me. thank you!

Upvotes: 1

Views: 232

Answers (3)

Tushar Acharekar
Tushar Acharekar

Reputation: 900

I am using flexbox link is Flexbox here

<html>
<style>
html{
  height: 100%;
}

body{
  height: 100%;
}

#wrapper{
  height: 100vh;
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box{
    display: flex;
    background: black;
    margin: 0.5%;
}

#box-1{
    height: 50%;
    width: 49%;
}

#box-2{
    height: 50%;
    width: 49%;
}

#box-3{
    height: 50%;
    width: 49%;
}

#box-4{
    height: 50%;
    width: 49%;
}

p{
  color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="wrapper">
		<div id="box-1" class="box">
			<p>Hi</p>
		</div>
		<div id="box-2" class="box">
			
		</div>
		<div id="box-3" class="box">
			
		</div>
		<div id="box-4" class="box">
			
		</div>
	</div>
</body>
</html>
</body>
</html>

Upvotes: 0

Kit Loong
Kit Loong

Reputation: 373

Alternative beside Ismail Farooq's answer

.box {
    display: block;
    position: relative;
    background: black;
    float: left;
}

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6807

Put vertical-align: top; to .box by default it has vertical-align: baseline;

.box {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: black;
}

Upvotes: 2

Related Questions