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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -