How to make a div fill a remaining horizontal space using CSS?
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent.
Syntax:
width: 100%;
Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
<!DOCTYPE html> <html> <head> <title> make a div fill remaining horizontal space </title> <!-- Style to fill remaining horizontal space --> <style> #main { height: 100px; border: 1px solid black; font-size: 20px; font-weight: bold; color: white; } #left { float: left; width: 180px; height: 100%; background-color: green; } #right { width: 100%; height: 100%; background-color: blue; } </style> </head> <body style = "text-align:center;"> <div id = "main"> <div id="left"> DIV_1 </div> <div id="right"> DIV_2 </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 2: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
<!DOCTYPE html> <html> <head> <title> Title </title> <style> #main { height: 100px; border: 1px solid black; font-size: 20px; font-weight: bold; color: white; } #left { float: left; width: 100px; height: 100%; background-color: green; } #center { float: left; width: 100px; height: 100%; background-color: blue; } #right { width: 100%; height: 100%; background-color: green; } </style> </head> <body style = "text-align:center;"> <div id = "main"> <div id="left"> DIV_1 </div> <div id="center"> DIV_2 </div> <div id="right"> DIV_3 </div> </div> </body> </html> |
chevron_right
filter_none
Output:
