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%;
Comments
Post a Comment