Keep an element centred between, or above, two other elements - css

Question

I've managed to get CSS3 to almost do what I want:
The grey .top-middle container is of arbitrary width, and must always remain flush with the top edge of the parent container (the <main>).
The purple left and right containers are also of arbitrary width, and must always remain flush with their respective edges of the parent container.
When the parent container is sufficiently wide, the three top containers should sit side-by-side; otherwise, the left and right containers should sit just beneath the .top-middle container. (It would be nice if the two purple containers dropped at the same time, but I'll live with one of them remaining next to the middle container, when there's space.)
The minimum width of the <main> container should essentially be the width of the .top-middle container
The .top-middle container should be centred, ideally relative to the parent container (<main>), but at least relative to the horizontal space available to it (between the left and right containers)
It's that last requirement, #5, that I haven't managed.
I'd prefer not to resort to JavaScript, and of course, it needs to be a cross-browser solution. (I don't really care about IE < 11, though—people using that cruft have bigger worries than whether my CSS looks pretty!)
N.B. This issue cannot (AFAIK) be tested in jsfiddle, StackOverflow's code snippet feature, or any other fixed-width environment. Please copy my code and paste it into a file, and watch what happens when you widen or narrow the browser window.
Here's my complete code, for your copying and pasting pleasure:
main div {
white-space: nowrap;
color: white;
}
.top-container {
background: olive;
}
.top-middle {
background: grey;
}
.top-left,
.top-right {
background: purple;
}
.bottom-container {
background: blue;
text-align: center;
}
/* The crux of the layout starts here */
main {
height: 300px;
display: flex;
flex-direction: column;
}
.top-container>* {
display: inline-block;
padding: 1em;
}
.top-left {
float: left;
}
.top-right {
float: right;
}
.spacer {
background: silver;
flex-grow: 1;
}
<main>
<div class="top-container">
<div class="top-middle">
This should be centred, and always stay on top.
<em>Left</em> and <em>right</em> should drop when the window contracts.
</div>
<div class="top-left">left</div>
<div class="top-right">right</div>
</div>
<div class="spacer"></div>
<div class="bottom-container">This is the bottom.</div>
</main>

Answer 1

Your fifth requirement can be achieved by making the following change:
Add text-align: center; to .top-container
This works because text-align effects the alignment of inline elements:
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
text-align (https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
.top-middle is set to be inline-block due to .top-container>* { display: inline-block; padding: 1em; } so will be centered within .top-container.
main div {
white-space: nowrap;
color: white;
}
.top-container {
background: olive;
text-align: center;
}
.top-middle {
background: grey;
}
.top-left,
.top-right {
background: purple;
}
.bottom-container {
background: blue;
text-align: center;
}
/* The crux of the layout starts here */
main {
height: 300px;
display: flex;
flex-direction: column;
}
.top-container>* {
display: inline-block;
padding: 1em;
}
.top-left {
float: left;
}
.top-right {
float: right;
}
.spacer {
background: silver;
flex-grow: 1;
}
<main>
<div class="top-container">
<div class="top-middle">
This should be centred, and always stay on top.
<em>Left</em> and <em>right</em> should drop when the window contracts.
</div>
<div class="top-left">left</div>
<div class="top-right">right</div>
</div>
<div class="spacer"></div>
<div class="bottom-container">This is the bottom.</div>
</main>
Unfortunately, there is a drawback with this method as a bug in Firefox will always force .top-left and .top-right onto a new line:
Also affecting Bugzilla itself, as glob pointed out on IRC. https://bugzilla.mozilla.org/show_bug.cgi?id=677757#c4 has the
"comment 4" text hidden
The cause is this code in nsLineLayout::ReflowFrame:
if (psd->mNoWrap) {
// If we place floats after inline content where there's
// no break opportunity, we don't know how much additional
// width is required for the non-breaking content after the float,
// so we can't know whether the float plus that content will fit
// on the line. So for now, don't place floats after inline
// content where there's no break opportunity. This is incorrect
// but hopefully rare. Fixing it will require significant
// restructuring of line layout.
// We might as well allow zero-width floats to be placed, though.
availableWidth = 0;
}
I wonder whether the right thing to do is:* not manipulate the
available width at all, or* make the available width infinite, since
the nowrap content is never going to wrap around the float anyway
(In theory, the correct solution is not to try placing the float until
the following break opportunity. I wonder if other browsers do that.)
Bug 488725 - float pushed down one line with white-space: nowrap; (https://bugzilla.mozilla.org/show_bug.cgi?id=488725)
You could also use flex to center .top-middle although this wont push both .top-left and .top-right down to a new line when the space is taken up. To achieve this make the following changes:
Add display: flex; to .top-container to make its children use the flexbox model
Add flex-wrap: wrap; to .top-container to make its children wrap onto new lines when they run out of space
Add justify-content: space-between; to .top-container to add space around the child elements which will center .top-middle
main div {
white-space: nowrap;
color: white;
}
.top-container {
background: olive;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.top-middle {
background: grey;
}
.top-left,
.top-right {
background: purple;
}
.bottom-container {
background: blue;
text-align: center;
}
/* The crux of the layout starts here */
main {
height: 300px;
display: flex;
flex-direction: column;
}
.top-container>* {
display: inline-block;
padding: 1em;
}
.top-left {
float: left;
}
.top-right {
float: right;
}
.spacer {
background: silver;
flex-grow: 1;
}
<main>
<div class="top-container">
<div class="top-left">left</div>
<div class="top-middle">
This should be centred, and always stay on top.
<em>Left</em> and <em>right</em> should drop when the window contracts.
</div>
<div class="top-right">right</div>
</div>
<div class="spacer"></div>
<div class="bottom-container">This is the bottom.</div>
</main>
To get both .top-left and .top-right moving onto a new line when they run out of space you will need to use JavaScript. The following is using vanilla JavaScript but should provide a good starting point. In principle:
We check to see if the combined width of .top-left, .top-middle and .top-right is equal to or bigger than .top-container
If it is then we change the order of .top-left and .top-right to place them after .top-middle. We add margin to .top-left to force it onto a new line and margin to .top-middle to center it (as there are no elements in the same line for justify-content: space-between; to work)
If it isn't we set the styles back to the defaults
var topContainer = document.getElementsByClassName('top-container')[0];
var topLeft = document.getElementsByClassName('top-left')[0];
var topMiddle = document.getElementsByClassName('top-middle')[0];
var topRight = document.getElementsByClassName('top-right')[0];
var topContainerWidth;
var topLeftWidth = topLeft.offsetWidth;
var topMiddleWidth = topMiddle.offsetWidth;
var topRightWidth = topRight.offsetWidth;
var moveDivs;
(moveDivs = function(){
topContainerWidth = topContainer.offsetWidth;
if ((topLeftWidth + topMiddleWidth + topRightWidth) >= topContainerWidth) {
topLeft.style.order = 1;
topLeft.style.marginRight = topRightWidth + 'px';
topMiddle.style.margin = '0 auto';
topRight.style.order = 2;
} else {
topLeft.style.order = 0;
topLeft.style.marginRight = 0;
topMiddle.style.margin = 0;
topRight.style.order = 2;
}
})();
window.addEventListener('resize', function(event){
moveDivs();
});
main div {
white-space: nowrap;
color: white;
}
.top-container {
background: olive;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.top-middle {
background: grey;
}
.top-left,
.top-right {
background: purple;
}
.bottom-container {
background: blue;
text-align: center;
}
/* The crux of the layout starts here */
main {
height: 300px;
display: flex;
flex-direction: column;
}
.top-container>* {
display: inline-block;
padding: 1em;
}
.top-left {
float: left;
}
.top-right {
float: right;
}
.spacer {
background: silver;
flex-grow: 1;
}
<main>
<div class="top-container">
<div class="top-left">left</div>
<div class="top-middle">
This should be centred, and always stay on top.
<em>Left</em> and <em>right</em> should drop when the window contracts.
</div>
<div class="top-right">right</div>
</div>
<div class="spacer"></div>
<div class="bottom-container">This is the bottom.</div>
</main>

Answer 2

I rearranged your markup and used display: table-cell. Here's the fiddle example http://jsfiddle.net/k108vt58/. Hope this helps and is what you're looking for.