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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:

Example 2: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.