How can I make my html perfect? I always have problems with positioning in different browsers. The reason is because I am confused with my css positioning. When it comes to positioning using margin-left/ or position: relative; left, for example, I just take a coinflip. Can someone please help me by telling me what positioning is used for what.

Thank you for anyone who takes time to help.

1 answer

3
points
This was chosen as the best answer

A web page is a series of rectangular elements.

Without instruction the elements are laid out as they appear in the source using the browsers default settings, padding and margins automatically applied at certain amounts.

When you instruct (using CSS) the browser to use different settings you can completely alter the layout.

Margins and padding are applied to the element 'box' according to the browsers box model.

Using position:relative moves the box from the space it would normally occupy by the offsets you specify, but leaves the space in the document as if the element were still there.

Other values of position take the element out of the flow completely.

A good tutorial can be found here:

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-2/

Use margins first and foremost, use vertical padding if needed and only use horizontal padding sparingly as different box models will change your layout. (see also this link)

Only use position:relative, or position:absolute when you know why you're doing it.

Get to know how floats work, use those more than position.

Answered over 6 years ago by Tony Crockford