7

Working on a webpage. Using Flexbox for a 1-column layout. Now I need to display two Divs next to each other and I regret every lifechoice.
Why is it such an impossible task to put two divs in perfect alignment next to each other. Why oh lord have thou forsaken me.

Comments
  • 1
    How about grid layout?
  • 3
    You could, I don't know, wrap the two divs in another div? Then it would work just fine
  • 4
    Why do I keep reading "forsaken me" in Serj Tankian's voice (he's the lead singer of System of a Down)
  • 1
    display: flex;

    Put that on the parent element and it should put the divs next to each other.
  • 0
    @stop I didn't know that I wanted to do that, and changing that now feels like so much work!
    @Froot doesn't quite work, as the flexbox is column and I want them in row.
  • 0
    @tahnik good idea, instead of a new flex container I use the old one
  • 0
    @ComradeBob Of course it does. Make the wrapper div another flex. You can nest flex elements as much as you want.

    So basically you'd have a column flexbox that contains a row flexbox. Try it out

    Hope this helped 🙂
  • 0
    @Froot I was going to suggest the same thing. I've used nested Flexbox containers pretty effectively.
  • 1
    @wiredgecko Yea, you can easily achieve all sorts of madness with them 😄
  • 0
    @stop Grid is certainly more flexible and works really well. The challenge is still browser/device support.

    Even if I use CSS Grid now, I'd probably do a Flexbox fallback to cater for device/browser support.
  • 1
    @wiredgecko PostCSS + CSSNext.
    Nobody supports old devices by hand these days, it's all automated
  • 0
    @Froot what if the manual approach is labelled "artisanal"? 😛
  • 0
    @wiredgecko what? 😄
  • 0
    Finally figured out why it didn't render a div as it should've. Missed a
    </code>......
    Classic.
Add Comment