How to make a div fill a remaining horizontal space using CSS?
The width property in CSS is a versatile feature used to occupy a div’s remaining horizontal space. By setting the width to 100%, it adapts to fill the entire width of its parent element, providing a responsive design solution.
Syntax:
width: 100%;
Example 1: This example uses the width property to fill the horizontal space. It set the 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>
Output:
Example 2: This example uses the width property to fill the horizontal space. It set the width to 100% to fill it completely.
<!DOCTYPE html>
<html>
<head>
<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.