Margins and horiz. scrollbars

Here is something that has been staring at me in the face ever since I had stated to code, yet I have never noticed until now.

Lets say you have a page which you want to use all the available space, minus 200px “breathing space” on each side. This would be the converse version of declaring a fixed width and margin:0 auto to center a page, so essentially #page{margin:0 200px;} It WORKS! never had a doubt tho. Still you dont want it to collapse into nothingness when the view port is too narrow, so lets say we add min-width:10em; ( for the sake of complicating this example I am using EMs…as the workaround with PX is obvious).

Here is the rub. I would have expected scroll bars to be visible at a view port width of 10em+400px instead they don’t appear until 10em+200px ( at which point you can see all of the left margin but none of the right). I thought both horizontal margins would be used to calculate weather the view port required horizontal scrollsbars or not. Am I mistaken? I find this really odd behavior, but the code is so simple I have no idea what could be wrong.

SAMPLE CODE:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			 html, body, h1, p {margin:0; padding:0}
			body, html { height:100%}
			html{background:  silver;	 }
			#shell{padding:0 50px;  min-width: 10em; margin:0 200px; background: pink; 
			 border-right:2px groove #aaa;border-left:2px groove #ccc; min-height:100%;  }
			h1 { text-align: center;
				 font-family:  Helvetica; 
				 font-size: 300%;
				 color:#fff;
				 padding:  .5em 0;

				}
			  p { font: normal 125%/1.35 garamond; padding-bottom:1em;}
		</style>
	</head>
	<body>	<div id="shell">
			<h1> Test headline</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
	</body>
</html>


The min-width on the shell div just applies to the pink area, so I’m not surprised the scroll bar only appears when the pink area starts to get hidden.

Maybe you should set a min width on the body element too?

body {min-width: 670px;}

Or maybe have an outer wrapper div with 200px padding on each side instead of the margins on shell?

That would have been my “easy” workaround. The problem occurs when you WANT to use TWO different measurements 200px margin and 10ems wide… , for example.

Using padding on the wrapper , instead of margin on the element, was the second idea that came to mind. When I put it in the body element, I still got the same results… which is weird.

Honestly , I am just surprised that the viewport can ride over the right margin w/o causing scroll bars to appear to begin with.

Hi Ray,

I think what is going on here is that the margin is collapsing with the direction value.
The default is direction: ltr; on your test page. If you were to change it for the sake of testing you will see the margin collapse on the left side.

html {
    background:  silver;
    direction: [B]rtl;[/B]
}

It really makes sense if you think about it, if it didn’t collapse the user could scroll left and right before there was any need to scroll. After all, scrolling is for reaching content that has gone beyond the fold. :wink:

Rayzur( it’s like speaking to a mirror, lol),

I suppose you are right. I never realized that margins would collapse horizontally(learn something new everyday).

Actually horizontal margins never collapse :). What you are running in to is how over-constrained dimensions are handled.

Once the viewport is smaller than the 200px margin-right that you set then it becomes over-constrained and the right margin is ignored and the left margin only applied (as Ray said this is the reverse in a rtl situation).

A box fits into its containing block and the sum of its margins+border+padding+ width needs to equal the containing block or it becomes over-constrained. In the case of over-constrained margins then in a ltr environment the right margin is ignored. It’s explained in 10.3.3 quite clearly :slight_smile:

If ‘width’ is not ‘auto’ and ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ (plus any of ‘margin-left’ or ‘margin-right’ that are not ‘auto’) is larger than the width of the containing block, then any ‘auto’ values for ‘margin-left’ or ‘margin-right’ are, for the following rules, treated as zero.

If all of the above have a computed value other than ‘auto’, the values are said to be “over-constrained” and one of the used values will have to be different from its computed value. If the ‘direction’ property of the containing block has the value ‘ltr’, the specified value of ‘margin-right’ is ignored and the value is calculated so as to make the equality true. If the value of ‘direction’ is ‘rtl’, this happens to ‘margin-left’ instead.

I never realized that margins would collapse horizontally

Actually horizontal margins never collapse :).

Hi Guys,

I was leery about using the “C” word there in my post. Sorry about that, I didn’t mean to cause any confusion about horizontal margins collapsing. As “Collapsing Margins” is one of the first things most people learn about with CSS, likewise they usually learn that horizontal margins never collapse.

Thanks for posting the Specs on that Paul. I could tell the behavior was tied in with the direction property somehow.

Maybe we should call them “Ignored” or “Fading” margins. :slight_smile:

Yes, I supposed you could say they collapsed to zero:)

Ignored margin is a better description as it doesn’t actually collapse but is just not taken into account at all.