Notes on the 50 percent DIV, Cascading Style Sheets, HTML, CSS #dev #web

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.

100% Width
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.

Float it
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.

Offset it
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:
position: relative;
top: -100%;
left: 50%;
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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s