Search code examples
csscss-floatcenter

How to float div (with both centered text inside) aside of list?

I'd like to get something like this with CSS.

enter image description here

In the left squere text should be centered (vertically and horizonatally) with a few text like '5'. Stripes include some text with newlines?

UPDATE

Thanks all for answer, You've got great skill.

I cannot use fixed height. Because content of the upper and the lower divs are dynamic and the left one should grow up according to width of gray box (which size depends on the content of the upper and the lower). also the box from image is like table row, it's one of many..

I know that good practice tells to use divs instead of table, but is it worth it? i would have done it with table long time ago.. but with divs it's looks like something unnatural and i'm going mad. :(

Solution

  • Look here: http://result.dabblet.com/gist/3360364/5e1586c78583dc31a495455e62327262c5ff2091

    Notice that the vertical alignment is centered, too.