Centralise a div with left justified content

Question

I'm sure there's an easy answer to this, but I just can't figure it out. I'm trying to come up with the following layout:

The red box is a div which should dynamically grow to fit the content, and should be centred on the page. It should be only as wide as the number of yellow divs it can fit horizontally. The yellow boxes are divs which should be left justified. So far I've tried making the red div displayed inline-block within a container div set to text-align:center, and the yellow divs set to display inline-block. The yellow divs display correctly and flow as the browser is resized, but the red div is always 100% of the width of the browser so the grid is not centralised on the page.

Here's my CSS:

<style>

    .bar {
        height:50px;
        font-weight:300;
        text-align:right;
    }

    .bluebackground {
        background-color:#00A9A3;
    }

    .barcontent {
        margin-right:10px;
        color:white;
    }

    .verticalalign {
        display:inline-block;
        vertical-align:middle;
    }

    .DivHelper {
        display: inline-block;
        vertical-align: middle;
        height:100%;
    }

    .normalfont {
        font-family: 'Open Sans Light', sans-serif;
    }

    .bigtext {
        font-size:20px;
    }

    .medium {
        font-size:15px;
    }

    .blockp {
        display:inline-block;
    }

    .darktext {
        color:#333;
    }

    body {
        height:100%;
        margin:0;
        padding:0;
        background-color:#F6F6F6;
    }

    html, body, #body2 {
        height: 100%;
        min-height: 100%;
    }

    table td:last-child {
        width: 100%;
    }

    .menulinkcontainer {
        display:inline-block;
        vertical-align:top;
        padding:20px;
        margin-bottom:20px;
        background-color:green;
    }

    .menulinkbackdrop {
        display:inline-block;
        min-width:250px;
        width:250px;
        height:200px;
        min-height:200px;
        cursor:pointer;
    }

    .menulinkshader {
        position:relative;
        top:-200px;
        left:0px;
        width:100%;
        min-width:100%
        height:100%;
        min-height:100%;
        background-color:rgba(0,0,0,0.0);
    }

    .menulinktext {
        display:inline-block;
        min-width:250px;
        max-width:250px;
        width:250px;

    }

    .menucontainer {
        padding:20px;
        background-color:red;
        display:inline-block;
        clear:both;
        float:left;
    }

</style>

And the HTML:

<div class='menucontainer'>
        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#777' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#777' align='center'>
                REVIEWS
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Reviews link.
            </div>
        </div>

        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#f33' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#f33' align='center'>
                COMING SOON
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Coming soon link.
            </div>
        </div>

        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#3f3' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'>
                DEALS
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Deals link.
            </div>
        </div>

        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#3f3' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'>
                AWARDS
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Awards link.
            </div>
        </div>

    </div>

Is flexbox cross browser compatible? I thought there were some issues with some browsers using that solution. Or has this changed? — mashers, Dec 14 '17 at 15:07
"It should be only as wide as the number of yellow divs it can fit horizontally" - can you clarify this bit? — sol, Dec 14 '17 at 15:14
@sol - yes I mean that the red container should grow and shrink to fit the size of its content, not fill the whole width of the browser. — mashers, Dec 14 '17 at 15:15
@mashers Should the red container grow until it fills the viewport? — sol, Dec 14 '17 at 15:16
@sol - it should grow to fit as many of the yellow divs as possible depending on the size of the viewport, and yes as the viewport is resized it should resize accordingly. Perhaps this is not possible with CSS and I should use Jquery — mashers, Dec 14 '17 at 15:19
By the way, center alignment in a flex box isn't right. If there is a smaller number of items in the last row, then it centralises them so they go out of alignment with the rest of the grid. They should all be aligned to the leftmost column, but the whole grid centered within the viewport. — mashers, Dec 14 '17 at 15:21

score 0 · Answer 1 · 2017-12-14T15:18:00.787

0

You need flexbox to flexibly align and wrap elements as the viewport is resized and I hope, this gives you an idea of its implementation.

.things {
  padding: 0;
  margin: 0;
  flex-flow:row wrap; /*Wraps down in row fashion*/
  display: flex;  /* Display property on parent container*/ 
  background:red;
}

.thing {
  background:yellow;
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:1 0 200px; /* 1 is for flex-grow, 0 for flex-shrink and the basis width is set to 200px */
  max-width:250px;
  height:200px;
  align-items:center;
}

<div class="things">
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
</div>

edited Dec 14 '17 at 15:18

answered Dec 14 '17 at 15:12

I tried this and it caused the yellow divs to stretch to fit the width of the browser. They need to stay the correct width and flow into the container. – mashers Dec 14 '17 at 15:20
You want the yellow divs to be constant and red to be dynamic? – Dec 14 '17 at 15:20
yes. The red box needs to be centered on the page and adjust its size dynamically. I think CSS might not be capable of this. I might need to use Jquery and hook in to the browser resize events. This is not ideal, however. – mashers Dec 14 '17 at 15:22
@mashers Alright, I'll look into it. – Dec 14 '17 at 15:23
Thanks @Highdef! I'm still experimenting. Flexbox doesn't quite do it as it can't keep the columns aligned while still centre justifying the whole grid. I'm not sure it's possible. – mashers Dec 14 '17 at 15:31
@mashers Yeah, I tried grid and flexbox and combination of two. I got nothing, you probably need javascript. – Dec 14 '17 at 15:53

Centralise a div with left justified content

1 Answers1