html5 - border-left in css when % is used for width not working -

i have piece of html5 code:

<div id="box4">   <div id="leftside"></div>   <div id="rightside"></div> </div> 

and in css code add style:

#box4 {    width:100%;    height:80%;    background-color: gray;    float:left; } #leftside { width: 50%;} #rightside { left: 50%; width: 50%; border-left: 1px solid #cdd0d4;} #leftside, #rightside {position:absolute} 

however, border-left not showing "rightside" <div> tag. think related fact using % width of tag, don't know how solve it. need use % width size. appreciated.

it works. problem both leftside , rightside elements don't have height. if set height it, or add content you'll see.

#box4 {    width: 100%;    height: 80%;    background-color: gray;    float: left;  }  #leftside { width: 50%;}  #rightside { left: 50%; width: 50%; border-left: 1px solid #cdd0d4;}  #leftside, #rightside { position:absolute; }

<div id="box4">    <div id="leftside">1</div>    <div id="rightside">2</div>  </div>

other that, should set #box4 {position: relative;}, otherwise the absolute children positioned relative viewport (however, maybe it's ok current case).

and have height: 80%; work, you'll need set html, body {height: 100%;}, how percentage height works. see updated example below.

* { box-sizing: border-box; }  html, body { height: 100%; margin: 0; }  #box4 {    width: 100%;    height: 80%;    background-color: gray;    float: left;    position: relative;  }  #leftside, #rightside {    height: 100%;  }  #leftside { width: 50%;}  #rightside { left: 50%; width: 50%; border-left: 1px solid #cdd0d4;}  #leftside, #rightside { position:absolute; }

<div id="box4">    <div id="leftside">1</div>    <div id="rightside">2</div>  </div>