Best practise for padding and margins for divs within divs


Just wondering what the best practise is for aligning divs that are within a div. For example the following image:

So I want to align the ‘course finder’ stuff that is all within [the pink] div. This is within the yellow div. Should I have padding on the yellow, outer div or should I just define the outer div’s height and width then position the pink div and any other div absolutely within the yellow area? Or is there another method I should be using?

Many thanks


Hi Jonno,

It partly depends on what the yellow div is for. If you use absolute positioning, any other content inside that div won’t “see” the pink div, so there will be some overlapping. So the first question is—What else (if anything) will the yellow div be used for?

It may have some text underneath the search box like so:


It’s fine if the text only goes underneath. But that latest image suggests that the form nearly fills the top part of the yellow box, in which case you don’t need abs pos or similar. Just give the form some left padding and let it follow the natural document flow.

Cool thanks. So in this instance does it matter whether or not I use either a padding on the holder div or a magin/padding on the inner divs?

No, although if you use padding on the holder it will apply to everything inside it.