How to make a div fill a remaining horizontal space using CSS? - GeeksforGeeks

10 May, 2022
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. 
html
<!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>                   
Output:
  
Example 2: This example use width property to fill the horizontal space. It set width to 100% to fill it completely. 
html
<!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>
Output:
 
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hardikkoriintern
CSS-Misc
HTML-Misc
Picked
Web-Programs
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)