CSS Positioning: Margin, Border, and Padding

re: CSS Positioning: Margin, Border, and Padding

wwfDev — Tue, 16 May 2006 11:59:59 GMT

Hi,

Nice sample, never too much on CSS!

But isn't the padding area included in the width-value? It seems so from your 2 first samples (the Lorem Ipsum ones). In the starting sample, the colored one, the width is said to apply to the content area only (not including the padding area), but the text (content) as displayed in your samples are surely not the same width.

I'm not sure but this may also apply to the border (that the width covers the whole thing except margins)?

re: CSS Positioning: Margin, Border, and Padding

Toby — Tue, 16 May 2006 12:27:56 GMT

This is all very nice to know but I have a problem regarding this. IE and FF renders theese boxes differently. Specifically the one with both width and padding set.
Does anyone have any good ideas as to how you should do a cross browser version of this simple thing?
I want to be able to have a fixed outer width and use internal padding as it works in IE.

re: CSS Positioning: Margin, Border, and Padding

Richard M Mathis — Tue, 16 May 2006 18:07:34 GMT

I've wanted to create something like the above for my techs for a while, just had never gotten around to it, so I'm going to take advantage of this and forward it on to them. :)

Something in CSS I always had an issue remembering was the order of setting different values for Margin, padding, etc. Example, if I wanted to do 10 pixels on the top, 5 pixels on the right and left, and 15 pixels on the bottom, I would usually do the longer margin-top: 10px, margin-right: 5px;, margin-left: 5px; and margin-bottom: 15px;
...

Until I realized it was done clockwise! so a more concise version would be: Margin: 10px 5px 15px 5px (top, right, bottom, left), now I just visualize a clock and its simple. :)

re: CSS Positioning: Margin, Border, and Padding

Jeremy H. — Wed, 17 May 2006 06:28:44 GMT

The IE hack that I use to because IE 6 or lower and FF (or Safari) render the sizes differently is like this...

#myDiv
{
width: 100; /*IE Width, this is the entire width you want */
padding: 0px 20px 0px 20px;
}

html>body #myDiv
{
width: 60px /* width minus border, padding, margins */
}

re: CSS Positioning: Margin, Border, and Padding

Nick G — Thu, 18 May 2006 12:13:10 GMT

VERY misleading article with incorrect explanations and demonstrations.

For a start, it hasn't even got a valid doctype specified, so the browsers are rendering in Quirks mode which is why none of the examples work properly. In fact the examples demonstrate the bugs in the ancient IE6 - and render differently in WORKING browsers such as Firefox, Safari and IE7.

This article should be pulled before it confuses any more people.

css positioning with margins

css positioning with margins — Sat, 02 Aug 2008 07:13:23 GMT

PingBack from http://gia.freepicturenews.info/csspositioningwithmargins.html

css positioning with margins

css positioning with margins — Sat, 02 Aug 2008 07:15:36 GMT

PingBack from http://laurel.freevideonewsradio.info/csspositioningwithmargins.html