html - How to set up width percentage basis? -
i have following problem: i'd create html page #sidebar spans constant 27px , #content spans remaining part of screen. #content divided 2 areas splitting @ 40% - 60%.
<html> <body> <div id="sidebar"> </div> <div id="content"> <div id="forty-percent"> </div> <div id="sixty-percent"> </div> </div> </body> </html> i have tried make following css:
#sidebar{ width:27px; } #content{ position:absolute; padding-left:27px; width:100%; } but cannot divide content 40%-60%, because percentages calculated width of #content , not area inside.
what doing wrong? can please help?
update:
the demo of not working version:
http://jsbin.com/iseqon/1/edit
ideally dashed boxes should side-by-side, inside blue box.
this may suit more needs. if want have better control of #sidebar & #content vertical alignment, must use inline-block have css solution.
you can view live here: http://codepen.io/jpsirois/pen/dvbmey
* { /* prevent padding added on defined width */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 0; /* need set 0 use inline-block here */ color: white; /* better preview purpose */ } #sidebar, #content { display: inline-block; /* allow vertical-align control (float didn’t) */ font-size: 16px; /* reset font-size normal */ vertical-align: middle; /* demo of vertical-alignement */ } #sidebar { width: 27px; background: darkred; height: 50px; /* better preview purpose */ margin-right: -27px; /* allow #content inlined aside */ } #content { font-size: 0; /* need set 0 use inline-block here */ width: 100%; padding-left: 27px; } #forty-percent, #sixty-percent { height: 100px;/* better preview purpose */ display: inline-block; font-size: 16px; /* reset font-size normal */ } #forty-percent { width: 40%; background: darkgreen; } #sixty-percent { width: 60%; background: darkblue; }
Comments
Post a Comment