How to Expand the Div to Fill the Remaining Width with 4 Simple method
How to Expand the Div to Fill the Remaining Width with 4 Simple method
1. Using “float : left”.
Let’s understand by example that we can expand the width of the remaining of the div by giving “float : left”
Example :
<!DOCTYPE html>
<html>
<head>
<title> Expand the div to fill the remaining width </title>
<style>
.main_box {
height: 100px;
border: 1px solid #000;
font-size: 18px;
color: #fff;
}
.fixed_width {
background-color: #214057;
height: 100%;
float: left;
width: 170px;
padding-left: 30px;
}
.remaining_width {
background-color: #4aa0dd;
height: 100%;
width: 100%;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="main_box">
<div class="fixed_width">fixed width</div>
<div class="remaining_width">remaining fill width</div>
</div>
</body>
</html>Output :
So we have seen in the example above that we fixed the width by giving “float : left” to the first div due to which the second div expanded in the remaining space.
Read — How do I display HTML tags in HTML?
2. Using “float : right”.
As we used “float : left” we can expand the width of the rest of the div by using “float : right”. let’s understand by example that we can expand the width of the remaining of the div by giving “float : right”
Example :
<!DOCTYPE html>
<html>
<head>
<title> Expand the div to fill the remaining width </title>
<style>
.main_box {
height: 100px;
border: 1px solid #000;
font-size: 18px;
color: #fff;
}
.fixed_width {
background-color: #214057;
height: 100%;
float: right;
width: 170px;
text-align: center;
}
.remaining_width {
background-color: #4aa0dd;
height: 100%;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="main_box">
<div class="fixed_width">fixed width</div>
<div class="remaining_width">remaining fill width</div>
</div>
</body>
</html>Output :
So in the above example, by giving “float : right” to the first div, that div is set to the right side and the first div expands in the rest of the left side.
3. Using “float : left” With Three Divs.
So in this example we will take three divs and give “float : left” to the first and second div and expand the third div in the remaining space.
Read — ordered unordered lists in html
So let’s understand with an example
Example :
<!DOCTYPE html>
<html>
<head>
<title>How to Expand the div to fill the remaining width</title><style>
.main_box {
height: 100px;
border: 1px solid #000;
font-size: 18px;
color: #fff;
}
.left_div {
background-color: #214057;
height: 100%;
width: 200px;
float: left;
}
.center_div {
background-color: #214057ad;
height: 100%;
float: left;
width: 200px;
}
.right_div {
background-color: #2140574d;
height: 100%;
width: 100%;
}
</style>
</head> <body>
<div class="main_box">
<div class="left_div">FIRST_DIV</div>
<div class="center_div">SECOND_DIV</div>
<div class="right_div">THIRD_DIV</div>
</div>
</body>
</html>
Output :
4. Using “float : right” with Three Divs.
So in this example we will take three divs and give “float : right” to the first and second div and expand the third div in the remaining space.
So let’s understand with an example
Example :
<!DOCTYPE html>
<html>
<head>
<title> How to Expand the div to fill the remaining width </title><style>
.main_box {
height: 100px;
border: 1px solid #000;
font-size: 18px;
color: #fff;
}
.right_div {
background-color: #214057;
height: 100%;
width: 200px;
float: right;
}
.center_div {
background-color: #214057ad;
height: 100%;
float: right;
width: 200px;
}
.left_div {
background-color: #2140574d;
height: 100%;
width: 100%;
}
</style>
</head> <body>
<div class="main_box">
<div class="right_div">FIRST_DIV</div>
<div class="center_div">SECOND_DIV</div>
<div class="left_div">THIRD_DIV</div>
</div>
</body>
</html>
Output :
read more — https://coderelative.com/expand-the-div-to-fill-the-remaining-width/