Search code examples
htmlcssposition

Child div not responding to parent's relative property

I am trying to to create two divisions. Basically two 50% divs next to each other. I am attempting to center the divs vertically and I usually use this block of code to center things vertically/horizontally:

text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);

However, in this case it seems that my child divs green-grid-left and green-grid-right are not responding to the position: relative of green.

Can anyone tell me why my two divs are not aligning in the middle of each of their 50% blocks?

.green {
	background-color: rgb(69,186,149); /*--Maybe this    background: #00a16d; ---*/
	width: 100%;
	height: 400px;
	position: relative;
}
#green-grid-left {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	/*text-align: center;
	margin: auto;*/
	width: 50%;
	height: 90%;
	float: left;
}
#green-grid-left-description {
	color: #FFF;
	font-size: 2.3em;
}
#green-grid-right {
	width: 50%;
	height: 90%;
	float: right;
}
#green-grid-right-description {
	color: #FFF;
	font-size: 2.3em;
}
<div class="green">
		<div id="green-grid-left">
			<div id="green-grid-left-description">Website problems?<br>
			We handle everything for you.</div>
		</div>
		<div id="green-grid-right">
			<div id="green-grid-right-description">Website problems?<br>
			We handle everything for you.</div>
		</div>
	</div>

enter image description here

Solution

  • This is so much easier with flexbox: 

    .green {
  background-color: rgb(69, 186, 149);
  /*--Maybe this    background: #00a16d; ---*/
  width: 100%;
  height: 400px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.green > div {
  flex: 0 0 40%;
  height: 90%;
  border: 1px solid green;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#green-grid-left-description {
  color: #FFF;
  font-size: 2.3em;
}
#green-grid-right-description {
  color: #FFF;
  font-size: 2.3em;
}
    <div class="green">
  <div id="green-grid-left-description">Website problems?
    <br>We handle everything for you.</div>

  <div id="green-grid-right-description">Website problems?
    <br>We handle everything for you.</div>

</div>