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

Is there a way to dynamically shift arrow key focus onto buttons in Angular using the left and right arrow keys?

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Connecting an external SVG file to its corresponding HTML code

Hide the div element once the timer runs out

IE6 disrupts stored layouts

Boundaries on Maps: A guide to verifying addresses within a boundary

Create a distinct CSS animation 'origin' declaration for every <g> element

Is there a regular expression that can be used to extract sentences from HTML

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

What's preventing my Angular list from appearing?

The HTML and body elements do not possess a width of 100% within the document

Solving the right-to-left orientation issue in the Bootstrap navbar

Tips for converting text from an HTML input field to a JSON file

Three.js is currently rendering a blank canvas in pure white

What is the best way to prevent the first option in a <select> element from moving up and down using jQuery?

Guide to accessing the content within an h1 tag with JavaScript

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

How can we identify if the user is utilizing a text-input control?

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

CSS slideshow with automatic horizontal image transition that seamlessly restarts