I’ve had some issues recently trying to get a fieldset pixel perfect, some things just didn’t add up (and I’m not just talking about the height and things overlapping here).
So I thought I’d make some notes on the subject:
The first place to start is the box model, a height of 100px is the inner height, the border, the legend text size and its padding are additional to this. I really hadn’t given any thought to the legend having padding!
Another thing to note is the border size isn’t consistent across browsers.
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.