html - Aligning 4 divs side by side with percentage dimensions in a parent div -
how can achieve this?
html code:
<div class="inset"> <div class="innerwrapper"> <div class="uncollapse"> </div> <div class="featuredbox"> <div class="rank"></div> <div class="banner"></div> <div class="desc"></div> <div class="votes"></div> </div> </div> </div>
css code:
@charset "utf-8"; .featuredbox { background-color: #f8f8f8; height: 160px; width: 100%; border: 1px solid #d5d5d5; margin-top: 10px; -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8; box-shadow: 0px 0px 4px 1px #d8d8d8; padding-top: 15px; padding-bottom: 10px; } .featuredbox .rank { color: #8f8f8f; width: 10%; height: 100%; } .featuredbox .banner { width: 80%; height: 50%; } .featuredbox .desc { width: 80%; height: 50%; } .featuredbox .votes { width: 10%; height: 100%; }
what should http://puu.sh/49szh.png
how can make them align in particular format without using fixed values?
thank you!
it's asking me put more details, don't have more give :(
just put css html
.featuredbox { background-color: #f8f8f8; height: 160px; width: 100%; border: 1px solid #d5d5d5; margin-top: 10px; -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8; box-shadow: 0px 0px 4px 1px #d8d8d8; padding-top: 15px; padding-bottom: 10px; } .featuredbox div{ float:left; } .featuredbox .rank { color: #8f8f8f; width: 10%; height: 100%; } .featuredbox .banner { width: 80%; height: 50%; } .featuredbox .desc { width: 80%; height: 50%; } .featuredbox .votes { width: 10%; height: 100%; top:-50%; position:relative; }
Comments
Post a Comment