Be Excellent To Each Other

I am having a complete moment and cannot get this to work.

In the above image there is a red div of 100% width and unknown height. The height is controlled by the height of the orange div plus some padding maybe.

The height and width of the orange div are controlled by dynamic text content which we do not know ahead of time, but the orange div should be centred horizontally within the red div with equal width on both sides.

The blue div will be a fixed width and height (lets say 50px x 50px, smaller than the orange div), and placed over on the left hand side. It will sometimes be visible and sometimes not (controlled by javascript - either visibility or display, whichever works best), but in either case it should not affect the horizontal centring of the orange div. However, the vertical center of the blue div should be vertically aligned to match the vertical centre of the orange div.

I can add extra divs, or change things to spans, anything like that, but at the moment anything I try means that the flow of the horizontal centering for the orange div is taking into account the blue div when I need the blue div kind of taking out of the flow entirely.

Any ideas?

I have no idea about CSS, but I like the way your squares look like a wonky Mondiraan.

I'm certainly no expert on CSS, but wouldn't using absolute positioning on the blue div help to stop it getting in the way of the yellow one?

http://www.jemjabella.co.uk/russ/

Things to note: calc is not supported < IE11

-75px is half of the height of the padding of the red box. If you don't add padding to red, this is unnecessary - you can just use top: 50%;

In fact, if you add another div just inside red, you can apply the position: relative; to the inner div, apply padding to red, and remove the need for calc which increases your backward compatibility.

All the cool kids are using tables and one pixel transparent gifs for this sort of thing these days.

Thank you both, will have a look and get my teeth into working out if I can get that to work

I also asked this on Stack Overflow, and you answered quicker

And I read all your requirements which the stackoverflow people didn't

Incidentally, fyi flexbox support is dodgier than calc in IE.

Thank you for this cheer x

I think the problem is that you don't have any orange divs and seem to have a yellow one instead; that's probably breaking it.