Spend quite a while at work trying to get two divs inside a centered div next to each other and especially get them the same height as the parent div.

Got it working after numerous tries, was going to take the code home to continue.

Forgot to take the code home, have to start over again and I hardly understand CSS 😥

Fuck me. (Writing a new service thingy by the way)

Set to inner div

height:100%

This should work

@yendenikhil I've done this but no result with that one :/ (I do know the CSS basics)

Flexbox ftw.
Also; TailwindCSS ftw

I agree with @xewl, take a look at flexbox (or if IE support isn't an issue, even grid) css-tricks is a pretty good ressource for it: https://css-tricks.com/snippets/...

@linuxxx try flexbox ... Rlly

Centering sucks in CSS. Especially vertical centering.

@linuxxx
1. Is the height defined in the parent (centered) div or one of the inner divs?

2. Does the height of all have to expand by the content of the inner divs? (no overflow/hiding)

3. Is the parent centered horizontally and/or vertically?

There are multiple possibilities depending on your requirements, even without the use of flexbox.

@Kaji It's not that difficult. The problem is rather that it's often either tought badly or not correctly explained.

There are multiple ways of v-centering stuff:

- inline/line-height approach
- absolute pos/translate approach
- relative pos/translate/neg. margin approach
- table-cell approach
- flexbox

Which you chose depends on other factors such as:
- whether the outer container should grow in height if v-center content is vertically too big
- whether the outer countainer has a defined height
- what kind of other styles have to be applied the the v-center container
- browser compat.

Grid and Flexbox FTW

Centering in CSS: A Complete Guide

https://css-tricks.com/centering-cs...

@tyrogge Excellent resource! Used that one several times.