CSS full Height for child containers?

I need to make the 2 child containers “left” and “right” to be 100% Height as the parent container “” already ist – how is that possible? And how coul i manage a proper horizontally positioned container “hexCont” ?

CSS:

    <style type="text/css">
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#makkq {
min-height: 100%;
height: auto !important;
background-color: #ECE2C6;
height: 100%;
}
#makkq .left {
display:table;
float:left;
min-width:290px;
width:50%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
text-align:center;
background-color: #fff;
outline:1px solid #C9C9C9;
}
#makkq .right {
display:table;
float:right;
min-width:289px;
width:50%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
text-align:center;
background-color: #f8f8f8;
outline:1px solid #C9C9C9;
}
#makkq .inner {
display: table-cell;
vertical-align: middle;
padding:20px;
}
#makkq .innerTitleLft, #makkq .innerTitleRght {
width:100%;
font-size:24px;
font-weight:300;
color: #494949;
padding:15px 0;
}
#makkq .decisionLabel {
width:60px;
height:22px;
background-color: #494949;
color:#fff;
position:absolute;
text-align:center;
left:470px;
margin-top:90px;
padding-top:3px;
}
#makkq .hexContOuter {
position: relative;
}
#makkq .hexCont {
position: absolute;
margin-top:80px;
left:50%;
transform: translate(-50%, -50%);
text-align:center;
}
#makkq .hexagon {
color:white;
position: relative;
width: 60px;
height: 22px;
background-color: #494949;
margin: 50px;
}
#makkq .hexagon:before, .hexagon:after {
content:" ";
position: absolute;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
#makkq .hexagon:before {
left: 100%;
border-left: 11px solid #494949;
}
#makkq .hexagon:after {
right: 100%;
border-right: 11px solid #494949;
}
#makkq .hexagonTxt {
font-size:12px;
display:inline-block;
padding-top:1px;
}
#makkq .innerTxt {
width:100%;
font-size:12px;
line-height:16px !important;
font-weight:400;
color: #494949;
margin-bottom:35px;
}
</style>

HTML:

 <div id="makkq">
 <div class="hexContOuter">
  <div class="hexCont">
   <div class="hexagon">
    <span class="hexagonTxt">or</span>
   </div>
  </div>
</div>
<div class="left">
 <div class="inner">
  <div class="innerTitleLft">Lorem Ipsum Left</div>
  <div class="innerTxt">lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</div>
 </div>
</div>
<div class="right">
 <div class="inner">
  <div class="innerTitleRght">Lorem Ipsum Right</span></div>
  <div class="innerTxt">lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</div>
 </div>
</div>
</div>


Source: css3

Leave a Reply