How can I set two Flex Box divs next to each other (without parent flexbox)?

Hello there,
first, i wish all of u a happy new year !

regarding my problem:

I want to have two div boxes sitting next to each other, left and right.
The left one is a Flexbox Div and the right one can be one too, but doesnt have to necessarily.

So what options do I have ? the only option I see is: creating a parent flexbox thats holding both
divs and setting them vertical.

Is there any other way (without coding) doing this ?

p.s.: in this case I only use flexbox since I need to center the font of a button verticaly.
It sits in the upper third and I dotn want to use padding.
I dont see any different way from using flexbox for it !?

1 Like

You have many possibilities to make 2 divs stand next to each other.

To begin with, they must not have a fixed px width, or a % width whose total exceeds the width of the parent (% width must be under or equal to 50% obviously for example).

If they respect that rule, then making them display:inline block will make them stick one close to the other

http://vincent.polenordstudio.fr/snap/bcjvb.jpg

Or you can also make the second one float:right

http://vincent.polenordstudio.fr/snap/a6stp.jpg

But as you said, you can make their parent Flexbox, there’s nothing against having flex item nested.

You could also place each div inside of columns of a row element.

1 Like

hey vincent, thx for ur fast reply ! I just see that I maybe had to be more specific, since these options
I do know but they wont help me wth my problem. I try to be more specific:

  • each row shown here sits inside the upper row-

||-------Div1----------------------------------------||
textline 1
|---------Div2-----------------------------------|
|---------Div3----------------|
|— Box 1 — — Box 2----| — Box 3 ----|

so far box1 and box2 are inline blocks, but I want them both to be flexbox without div3 beeing flexbox.
box2 and box3 are now “falling down” because inline block is missing now.

|---------Div3-------------------|
|— Box 1 —
— Box 2----|
|— Box 3 ----|

so whats the cleanest way to have em side by side but box1 and box2 beeing a flexbox

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.