Re: Why same CSS code for Safari and IE but not Chrome and Firefox?

[Paulie_D]

All HTML elements are rectangular (despite appearances sometimes) so it’s often a good idea to think in terms of breaking up a design into boxes.

We can move those boxes around if necessary (let’s leave that for now) but here’s how I would break down your header.

http://codepen.io/Paulie-D/pen/vwdJj

4 boxes inside some sort of wrapper (I’ve used the `

` element).

They are arranged using floats (http://learnlayout.com/) and the percentages are just rough as are the heights. In general, I would let the content of each box determine it’s height and add padding (or margin if necessary) to get it just the way I want.

Using the z-index property I got the image (or whatever element we might choose) to appear above other later elements.