Help centering a div (that contains left aligned blocks)

Hi,

I am trying to create a nested block of left aligned divs, in a parent div that centres the left aligned block on the page. I can get this working fine for one row of left aligned divs, however when the row becomes two rows for some reason the padding increases to fill the width of the parent div.

In the example below I am trying to achieve the same result as the top element with the one below where there are a larger number of divs creating a second row. The only difference between the two elements is one extra div in the lower one.

The parent container has margins set to auto, is a block and centred. The green div is an inline block, auto width and flush left

https://preview.webflow.com/preview/roomthree-playground?preview=33578b6fca11874bb65c28ab4fa97d02

Any help would be appreciated!

John

The page above is called Test 02 on the shared link.

Hi, I’m pretty sure that’s what HTML/CSS should do. As soon as your “inline-block” squares expand beyond one line, their “inline-block” parent act like a “block” and expand like if it was width 100%

There must be a ton of solutions for what you’re trying to achieve, not using the method you’re trying to make work. Like giving text-center attribute to the parent div and adjusting margins for desktop and devices.

I have no idea what you are trying to do, that just sounded very confusing. I’d go watch the tutorial videos at http://tutorials.webflow.com/ for information on how positioning works in webflow.

Hi Vincent,

Thanks for your comment and help.

I think you have identified issue I am having, once the black inline blocks create two rows the parent green “inline block” changes to act as a “block” filling 100% of width rather than automatically sizing to the width of the black “inline blocks”.

I wondered if there was some setting I was missing to correct this but maybe that is just the way HTML works!

I had expected it to continue acting as an inline block regardless of the number of rows. This would allow me to:

  • Centre the green parent inline blocks in the pink block
  • Retain the left alignment of the black blocks inside the green block
  • Keep the green outer margins consistent regardless of screen width (rather than setting fixed margins for specific break points

The main issue here was trying to get an equal margin outside the row of black blocks left and right regardless of screen size.

To give more context here is the design based on this approach that I am trying to create:

You can see that the content blocks for each pub are left aligned within the parent so they line up vertically regardless of the number of blocks. The only thing missing which I was trying to do was that the group of left aligned blocks would be centred inside the white lines, at the moment there is larger margin to the right than left essentially because once an inline block goes to two lines it behaves as a block and fills 100% width.

I will see if I can find another way! If not I will leave it as you can see in the picture with a larger margin to the right and not try and centre!

Thanks,

John

Hey nice work in progress. Design-wise, I largely prefer if your blocks stay anchored to the left actually. The three forst lines of you screencap look very good… I wouldn’t center them :smile: I’d adjust the relative size of the first rectangle and following squares to fit in the desktop 940px container, then adjust the relative size for devices to look good too.

Hi Vincent, thanks!

This is where I am at the moment:

I am kind of making sense in my own mind of the left alignment and ragged space on the right by revealing details of the background image, in this instance a nice glass of whiskey! In that way the rows can be variable lengths without the “empty” space visually seeming like a problem.

I am new to designing in the browser and am trying to get to grips with basic HTML. Getting there slowly but surely.

Thanks for your advice.

John

PS. In the screecap above I have switched to using a 3:9 column element with the left hand side col for the text and the RHS col for the boxes. This scales nicely and keeps the text neatly to the left of the grid of boxes.

Great. So I noticed how you work, starting with boxes, validating your layout principles, adding a bit of context, of content, then finally applying bits of final design… I think it’s a very good workflow for Webflow.

And that’s the way it is. Webflow brings a wonderful tool, but we’re to realize a good, well fine tuned design will always take time, trys, iterations, rebuilding etc… there is no magic!

Empty space… you can see it a breathing space. It’s easy to embrace empty space and use it to make your content stand out. It’s easy to add small and subtle elements to balance the empty zones with the crowded ones. Empty space is hard to defend with clients… they’ll always find something and try to shove something in (like their logo, again, but bigger).

I wouldn’t mind if you continue posting here to show your progression :smile:

Now I have to go out, I have a sudden urge for a pint :smile:

1 Like

Hi Vincent. LOL, I know what you mean. Stuck in here for a few hours longer! Site will be live in 2 weeks but will post some updates here. Thanks for your interest. John.

1 Like