html - How can I make 2 cells inside a CSS display: table-row occupy 50% of the row? -
i have following html:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="def" style="margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%;"> <div id="abc" style="display: table-row; width: 100%;"> <div style="width: 50%; height: 20px; background-color: green;"> want fill 45% of width of screen </div> <div style="width: 50%; height: 20px; background-color: red;"> want fill 45% of width of screen </div> </div> </div> </body> </html>
i tried code above seems divs inside table-row don't expand in width. if possible solution within div id of abc cannot change style of div def
you can following desired result
css
.container { margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 7.25rem; width: 90%; border:2px solid; background:yellow; } .subcontainer { display: table-row; width: 100%; } .first { width: 50%; height: 20px; background-color: green; float:left;/***use this***/ } .second { width: 50%; height: 20px; background-color: red; float:right;/***use this***/ }
or can use table-cell
.first { width: 50%; height: 20px; background-color: green; display:table-cell;/***use this***/ } .second { width: 50%; height: 20px; background-color: red; display:table-cell;/***use this***/ }
edit: better write css separately
Comments
Post a Comment