width - CSS: Need boxes at 62% and 38%, but can't seem to find the right formula or code -


trying left box @ 62% of width left , right box @ 38%. ever add percentages, still sit @ 50%. ideas? thank help/advice can share.

<!doctype html> <html> <head> <style> #sides {   display: flex;   padding: 0px 0px;   background-color: white; }  .sideleft {   flex: 1;       padding: 20px;   margin: 0; }  .sideright {   flex: 1;       padding: 20px;   margin: 0; }  #left {   background-color: #333333; }  #right {   background-color: #018dca; }  h1 {   color: #ffffff; }  h2 {   color: #ffffff; }  </style> </head> <body>  <div id="sides">   <div class="sideleft" id="left" align="right">     <h1>text</h1>     <h2>text</h2>   </div>   <div class="sideright" id="right">     <h1>text</h1>     <h2>text</h2>   </div> </div>  </body> </html> 

flex property combination of flex-grow: flex-shrink: flex-basis: ,

so set width need set flex-basis:

for ex.: flex: 0 1 38%;

fiddle


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -