Expanding the width of three floating divs in the center to match the width of the parent container div

Question

Expanding the width of three floating divs in the center to match the width of the parent container div

In my design, I have a parent container with three inner divs that are floated. The left and right divs have fixed sizes, however, I need the center div to expand and fill the space available within the parent container.

<div class="parent-container">
    <div class="left"></div>
    <div class="center">I want this div to automatically adjust its size to fit the parent container</div>
    <div class="right"></div>
<div>

.parent-container
{
    overflow: auto;
    width: 100%;
    border: 1px solid pink;
}

.left { width: 50px; }
.right { width: 80px; }

.left, .center, .right
{ 
    float: left; 
    border: 1px solid black; 
    height: 100px; 
}

http://jsfiddle.net/fvuyQ/

I attempted setting the width to 100%, but it didn't produce the desired result. Does anyone know of a straightforward solution to achieve this layout?

html css

Answer 1

Answer №1

How about floating only the left and right elements and adding margins to the center one

<div class="main-wrapper">
    <div class="left-side"></div>
    <div class="right-side"></div>
    <div class="center-block">this should stretch to fit the main wrapper</div>
<div>

css

.left-side { width: 50px;float: left; }
.right-side { width: 80px;float: right; }
.center-block{border:1px solid green;margin:0 80px 0 50px;}
.left-side, .right-side
{ 
    border: 1px solid black; 
    height: 100px; 
}

Demo available at http://jsfiddle.net/gaby/fvuyQ/4/

Answer 2

How about floating only the left and right elements and adding margins to the center one

<div class="main-wrapper">
    <div class="left-side"></div>
    <div class="right-side"></div>
    <div class="center-block">this should stretch to fit the main wrapper</div>
<div>

css

.left-side { width: 50px;float: left; }
.right-side { width: 80px;float: right; }
.center-block{border:1px solid green;margin:0 80px 0 50px;}
.left-side, .right-side
{ 
    border: 1px solid black; 
    height: 100px; 
}

Demo available at http://jsfiddle.net/gaby/fvuyQ/4/

Answer 3

Answer №2

If you're comfortable with utilizing CSS3, you have the option to employ the calc() function alongside box-sizing: border-box

Here is a working fiddle for reference: http://jsfiddle.net/EfrainReyes/4usMS/

Please keep in mind: The inclusion of box-sizing: border-box was implemented to simplify the process of determining the center div's width. If you opt not to utilize box-sizing: border-box, you can calculate the width by subtracting the combined widths of the left and right borders on the floating divs, totaling 6px, as shown below:

.center { width: calc(100% - 50px - 80px - 6px); }

Update: I have revised the example to adopt CSS2 positioning instead of relying on CSS3 calc(). You can view the updated version here: http://jsfiddle.net/EfrainReyes/4usMS/1

Answer 4

If you're comfortable with utilizing CSS3, you have the option to employ the calc() function alongside box-sizing: border-box

Here is a working fiddle for reference: http://jsfiddle.net/EfrainReyes/4usMS/

Please keep in mind: The inclusion of box-sizing: border-box was implemented to simplify the process of determining the center div's width. If you opt not to utilize box-sizing: border-box, you can calculate the width by subtracting the combined widths of the left and right borders on the floating divs, totaling 6px, as shown below:

.center { width: calc(100% - 50px - 80px - 6px); }

Update: I have revised the example to adopt CSS2 positioning instead of relying on CSS3 calc(). You can view the updated version here: http://jsfiddle.net/EfrainReyes/4usMS/1

Answer 5

Answer №3

Consider implementing the following changes in your CSS file

.center { 
    width: 100%;
    min-width: 100%; //Include this line if you always want it to occupy 100% of the parent element
}

.left, .right, .center {
    display: inline-block;
    position: relative;
}

It is recommended to also include the following code snippet

.parent-container {
     float: left;
     display: block;
     position: relative;
}

In addition, based on my interpretation of your query, you might find the below code helpful

.right, .left { position: absolute; }
.right { top: 0; right: 0; }
.left { top: 0; left: 0; }

Answer 6

Consider implementing the following changes in your CSS file

.center { 
    width: 100%;
    min-width: 100%; //Include this line if you always want it to occupy 100% of the parent element
}

.left, .right, .center {
    display: inline-block;
    position: relative;
}

It is recommended to also include the following code snippet

.parent-container {
     float: left;
     display: block;
     position: relative;
}

In addition, based on my interpretation of your query, you might find the below code helpful

.right, .left { position: absolute; }
.right { top: 0; right: 0; }
.left { top: 0; left: 0; }

Expanding the width of three floating divs in the center to match the width of the parent container div

Answer №1

Answer №2

Answer №3

Similar questions

Problem with applying ng-class directive in AngularJS

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

What is the best way to implement nested iterations in Jade?

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

Tips for accurately obtaining row counts from a dynamic table when the `<tr>` numbers are constantly fluctuating

Applying custom CSS designs to images using Thymeleaf

How to Make a React JS Component Shift to the Next Row as the Window Shrinks

Which is more optimal for importing CSS - using the link tag or style tag?

Implementing CSS in Laravel 8

What is the method for assigning a class name to a child element within a parent element?

Using checkboxes to select all in AngularJS

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information

Building an HTML Form for Requests

Modifying the Vue page background directly from a page: a step-by-step guide

Guide to showcasing associated information in HTML using Angular 7

Show picture during the process of loading an external webpage

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

The Regex.Replace function is not functioning as expected

Tips on how to change the color scheme of a webpage

What are some methods for converting data from data tables into alternative formats?