A pair of floating divs sandwiching a stretchy div in the middle

Question

A pair of floating divs sandwiching a stretchy div in the middle

I am looking to achieve a fixed width header with specific layout requirements:

A left-aligned div of variable width.
A right-aligned div of variable width.
An h2 element centered between the two divs, adjusting its size based on available space.

The content within the floated divs may vary in size.

Although I have attempted different methods, none have succeeded so far. While one solution involves absolutely positioning the outer divs and stretching the h2 element to full width while centering the text, I am hopeful that there is a more elegant way to accomplish this layout.

css layout html css-float

Answer 1

Answer №1

An example of a simple jsFiddle demo with minimal code.

Markup:

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <h2>H2</h2>
</div>

CSS styling:

#container {
    border:1px solid #999;
}
#left {
    float:left;
}
#right {
    float:right;
}
h2 {
    text-align:center;
    margin:0;
}

Answer 2

An example of a simple jsFiddle demo with minimal code.

Markup:

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <h2>H2</h2>
</div>

CSS styling:

#container {
    border:1px solid #999;
}
#left {
    float:left;
}
#right {
    float:right;
}
h2 {
    text-align:center;
    margin:0;
}

Answer 3

Answer №2

Instead of using float, consider utilizing display: inline-block and CSS calc to adjust the width of the middle div:

HTML:

<div id="wrapper">
    <div id="one"></div><div id="two"></div><div id="three"></div>
</div>

CSS:

#wrapper {
    min-width: 300px;
}
#one, #two, #three {
    display: inline-block;
    height: 300px;
}
#one {
    background: lightgreen;
    width: 100px;
}
#two {
    background: lightblue;
    width: 100%;
    width: calc(100% - 300px);
    width: -webkit-calc(100% - 300px);
    width: -moz-calc(100% - 300px);
}
#three {
    background: lightgreen;
    width: 200px;
}

Check out this demo on jsFiddle.

You can place the h2 element inside the middle container, denoted by #two.

Answer 4

Instead of using float, consider utilizing display: inline-block and CSS calc to adjust the width of the middle div:

HTML:

<div id="wrapper">
    <div id="one"></div><div id="two"></div><div id="three"></div>
</div>

CSS:

#wrapper {
    min-width: 300px;
}
#one, #two, #three {
    display: inline-block;
    height: 300px;
}
#one {
    background: lightgreen;
    width: 100px;
}
#two {
    background: lightblue;
    width: 100%;
    width: calc(100% - 300px);
    width: -webkit-calc(100% - 300px);
    width: -moz-calc(100% - 300px);
}
#three {
    background: lightgreen;
    width: 200px;
}

Check out this demo on jsFiddle.

You can place the h2 element inside the middle container, denoted by #two.

Answer 5

Answer №3

Looking at the HTML snippet below:

<div id="container">
    <div id="left-side">Left</div>
    <h2>Heading</h2>
    <div id="right-side">Right</div>
</div>

Here is the corresponding CSS code:

#container {
    width: 80%;
    margin: auto;
    display: table;
}

#container div, #container h2 {
    display: table-cell;  
}

#left-side, #right-side {
    width: 50px;
}

Check out the demo here: http://jsfiddle.net/UniqueUser/fKj8s/

Answer 6

Looking at the HTML snippet below:

<div id="container">
    <div id="left-side">Left</div>
    <h2>Heading</h2>
    <div id="right-side">Right</div>
</div>

Here is the corresponding CSS code:

#container {
    width: 80%;
    margin: auto;
    display: table;
}

#container div, #container h2 {
    display: table-cell;  
}

#left-side, #right-side {
    width: 50px;
}

Check out the demo here: http://jsfiddle.net/UniqueUser/fKj8s/

Answer 7

Answer №4

give this a try it might just be the solution you need

<style type="text/css>
div{
display: flex;
align-items: center;
height: 50px;
border: 1px solid blue;
position: relative;
}

#one{
float: left;
width: 100px;
}

#three{
float: right;
width: 100px;
}
</style>

<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid blue;">

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

<script type="text/javascript>
var spaceLeft = document.getElementById("one").offsetWidth;

var spaceRight = document.getElementById("three").offsetWidth;

var totalSpace = document.getElementById("outerDiv").offsetWidth;

document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>

Answer 8

give this a try it might just be the solution you need

<style type="text/css>
div{
display: flex;
align-items: center;
height: 50px;
border: 1px solid blue;
position: relative;
}

#one{
float: left;
width: 100px;
}

#three{
float: right;
width: 100px;
}
</style>

<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid blue;">

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

<script type="text/javascript>
var spaceLeft = document.getElementById("one").offsetWidth;

var spaceRight = document.getElementById("three").offsetWidth;

var totalSpace = document.getElementById("outerDiv").offsetWidth;

document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>

A pair of floating divs sandwiching a stretchy div in the middle

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating custom modals for individual elements using PHP

Incorporate custom styles into Joomla articles

Adding style using CSS to a dynamically generated table row in Vue.js

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

Troubleshooting Angular MIME problems with Microsoft Edge

javascript Href and onclick malfunctioning

Using conditional statements like 'if' and 'else' in JavaScript can

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

Conceal the parent div from its sibling within the same parent container

Content within the Iframe is in the process of loading, followed by

Sometimes, CSS unicode characters may not render correctly and appear as jumbled symbols like "â–¾"

Look through the contents of each child within a div to locate specific text, then conceal any that do not include it

Retrieve information from a MySQL database and integrate it into a different application

Displaying posts in a WordPress loop with a unique and unconventional CSS design

Verify that all elements sharing a common class are concealed

Troubleshooting Problem with CSS Gradient Text

Utilize JavaScript to send an email containing a link and content

XPath //*[text()] is not picking up the desired text

Troubleshooting the non-functioning collapse feature of Bootstrap 5's "Nav-bar"

Flow bar for micro-tasks