I’ve often been annoyed by CSS, nothing new there, but getting two side by side DIVs is often a pain I’ve had to endure.
In this post I’m going to make some notes that will hopefully make the next time less painful.
The first one to remember is DIVs default to display: block, which means they take up 100% of the width by default (which is width: auto). From what I have read, specifying 100% width is a bad idea and it is not needed either.
I can just float: left | right can’t I?
Well, this changes our display: block DIV into display: inline-block (or so it appears), so the containing DIV would need to also be display: inline-block to correctly size to the content.
Older browsers don’t support display: inline-block, so I like to avoid this option.
If you think about blocks, a DIV block can be positioned anywhere and notably relative to the starting position of the first using position: relative. To position two 50% DIV blocks next to each other you simply offset the second one like so:
This will of course need the heights to be equal or indeed fixed.
I’m still waiting for the right way to go about this, but for now this is what I’ve come up with and I hope it helps give you (and me) ideas in the future.