CSS Centre and Left align

[tobiq]

http://jsbin.com/venasaxure/1/

I want the green box to be centred inside the blue body, but the red boxes to be left aligned inside the green box.

Why is the green box filling the entire blue body? It has a display of “inline-block”, not “block”, and the inner elements are not extending the the edge.

[Beverleyh]

Why is the green box filling the entire blue body?

It’s expanding to accommodate the contents (that’s what inline-blocks do), so it will let as many red blocks as possible fit along one line, pushing out its width to fit its own container (body) unless it is told otherwise, i.e. you cap it with a max-width, or restrict the width of what’s inside, etc.

[tobiq]

Beverlyh, look at this screenshot, you may understand what I’m explaining:

http://prntscr.com/ilv5u6

As you can see, the green box is full-width even though there is a massive gap on its right, it’s no longer wrapping around it’s contents, but behaving like a block element.

What I want is this: (edited image)

http://prntscr.com/ilv7zz

See how the green box is centred, but it’s contents is left-aligned. This works because the box is wrapping it’s contents, but in my jsbin example the box is just taking the full width, maxing the centre align useless.

[tobiq]

Beverlyh, look at this screenshot, you may understand what I’m explaining:

http://prntscr.com/ilv5u6

As you can see, the green box is full-width even though there is a massive gap on its right, it’s no longer wrapping around it’s contents, but behaving like a block element.

What I want is this: (edited image)

http://prntscr.com/ilv7zz

See how the green box is centred, but it’s contents is left-aligned. This works because the box is wrapping it’s contents, but in my jsbin example the box is just taking the full width, maxing the centre align useless.

[Beverleyh]

As you can see, the green box is full-width even though there is a massive gap on its right, it’s no longer wrapping around it’s contents, but behaving like a block element.

Yes, it’s full-width because the red blocks inside, which sit along one row, have an accumulated width that is at least as wide as/wider than their container. The horizontal margins add to the overall width of the inner red blocks too.

In code terms, the inner elements are all in one row even if they don’t look it. If you create shorter rows of red blocks by inserting a manual <br /> after every second one, you can see it behaving as expected. But this is not good practice, so like I said before, try restricting the width of the green box by adding a width or max-width to make it look like your second image.

[tobiq]

Beverley, using width / max-width is something I did before you suggested it, but it’s not the intended outcome, because obviously I won’t have the resolution of every page viewer.

I want the green box to wrap around the red boxes, and not expand to the full-width, Automatically.

Do you know how to do this?

If the worst comes to the worst, I can set the width using javascript, but this is overkill, there must be a css solution.

[Beverleyh]

I want the green box to wrap around the red boxes, and not expand to the full-width, Automatically.

If there is only one red block inside the green block, the green one will wrap automatically.
If there are only two red blocks inside the green block, the green one will wrap automatically. Go ahead and edit your demo to see this in action – everything works as expected.

there must be a css solution.

There is. Media queries.

using width / max-width is something I did before you suggested it, but it’s not the intended outcome, because obviously I won’t have the resolution of every page viewer.

You can define different widths/max-widths (wrapping thresholds, if you will) inside media queries, depending on how many red blocks you want to appear along a row at different screen sizes.

[Xiija]

dunno if this helps, but have you tried
Viewport-Percentage (or Viewport-Relative) Lengths?

vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)

height: 50vh;
width: 80vw;

[tobiq]

I don’t know how further to explain this..

I only want the green box centred, and the red box left aligned inside.
setting a width of 80vw is not a solution because the green container is no longer wrapping tightly around the red boxes.

When the red boxes are not overflowing inside the green box, it works fine, because the left align becomes redundant — as the box wraps around all elements on the line. In short, it just looks like the red boxes are centre aligned within the blue body, with a green border.

When they start overflowing, instead of the green box staying centred, while the red boxes overflow in a left-aligned fashion, the green container simply takes up 100% width, and it looks like the green boxes are just left aligned within the blue body, when you ignore the colour of the container.

[Beverleyh]

I only want the green box centred, and the red box left aligned inside.

For that to happen, and the green box not to span full-width, you need to cap its width as previously explained.

setting a width of 80vw is not a solution because the green container is no longer wrapping tightly around the red boxes.

I’m sure that was just a suggested “for instance” because we don’t know what your wrapping threshold number is. You would set the actual width to whatever is needed to fit however many boxes you want visible in one line, and change that figure inside media queries based on device width breakpoint so that it looks desirable in different viewports/resolutions.

When they start overflowing, instead of the green box staying centred, while the red boxes overflow in a left-aligned fashion, the green container simply takes up 100% width, and it looks like the green boxes are just left aligned within the blue body, when you ignore the colour of the container.

This is just circling back round to restricting the width of the green box so that it doesn’t take up 100% width.

I’m sorry but I can’t explain it to you any more clearly.

[tobiq]

No problem, I’ll just set 100 media queries for every interval of width so that it works for every screen width up to 100000px;

[Beverleyh]

A 100000px viewport? Hmmmm, (upto) 3000px seems more likely for most people. Maybe 5000px for the elite few.

[tobiq]

I was joking… Terrible solution

[ced404]

Hi,

Maybe flexbox is the solution?

.box-wrapper::after is adding a “ghost” block at the end that pushes the last red blocks to the left.

https://codepen.io/ced404/pen/gvyNOg?editors=1100

But as soon as there’s not enough space for a red block there will be an empty space at the right of the green box…

[Beverleyh]

Media queries are not a terrible solution. Please try to appreciate that we do not know what you want from the bigger picture. If you give us a real-life example of how this is being used, (are 70px blocks and 20px margins really what you’re working with? what will this block system contain?), how many blocks you want maximum in one line, and who your audience is, we can maybe offer more specific help. Otherwise, carry on being facetious on your own time.

[Author]

Posts