Question

This question must have asked in various forms in many ways but I’ve been searching quite a bit and could not find the answer hence my asking.

I have a div width fixed height, stretching 100% width.

Inside I have 2 divs with same height as the parent, with various widths which in total is less than the parent’s width.

I need these divs centered inside the parent, next to each other. I can get one of the divs centered using text-align: center; and margin: 0px auto; however the other one breaks line. If I get them to float: left; or right, then they do not get centrally aligned.

What I need (2 elements inside the parents):

###############################################################
#                |  El. ||         El.       |                #
#                |  A   ||         B         |                #
#                |      ||                   |                #
###############################################################

And if there were 3 elements inside the parent:

###############################################################
#       |  El. ||         El.       ||       El.      |       #
#       |  A   ||         B         ||       C        |       #
#       |      ||                   ||                |       #
###############################################################

Thank you for your kind help.

Answer 1

Have you tried adding an additional div to contain the two inner divs? Then you should be able to center align it with auto margin and set the text-align: center; as well. If the divs still stack, try display:inline.