locked
How to use a right margin on a -ms-grid

    Question

  • Take this sample:

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
    	<style>
    		section {
    			border: 1px solid blue;
    			overflow-x: scroll;
    		}
    
    		div {
    			display: inline-block;
    		}
    
    		div:first-child {
    			margin-left: 120px;
    			width: 800px;
    			height: 200px;
    			background-color: #ff0000;
    		}
    
    		div:last-child {
    			margin-right: 120px; /* In DOM Explorer, the margin seems to be applyied for the -ms-grid version, but the scrolling doesn't seems to react well... */
    			width: 800px;
    			height: 200px;
    			background-color: #00ff21;
    		}
    	</style>
    </head>
    <body role="application">
    	<section style="display: -ms-grid; -ms-grid-columns: auto auto;">
    		<div style="-ms-grid-column: 1;"></div>
    		<div style="-ms-grid-column: 2;">I Want a margin on my right...</div>
    	</section>
    
    	<section style="white-space: nowrap;">
    		<div></div>
    		<div></div>
    	</section>
    </body>
    </html>

    On the -ms-grid version, I just can't make the right margin works on the last child. I want to use this pattern to have margin on both sides of the the main hub, but the scroll bar should be entire window width.

    Using the no-wrap technique, I can make it works, but it stop workings as soon as I add a content into the div.

    Is it a bug, or is there any better way to have a full width scroll bar, but with margin working?

    Wednesday, August 01, 2012 8:31 PM

Answers

  • How about adding a dummy div:

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style>
    		section {
    			border: 1px solid blue;
    			overflow-x: scroll;
    		}
    		div {
    			display: inline-block;
    		}
    		div:first-child {
    			margin-left: 120px;
    			width: 800px;
    			height: 200px;
    			background-color: #ff0000;
    		}
    		div:nth-last-child(2) {
    			margin-right: 120px;
    			width: 800px;
    			height: 200px;
    			background-color: #00ff21;
    		}
    	</style>
    </head>
    <body role="application">
    	<section style="display: -ms-grid; -ms-grid-columns: auto">
    		<div style="-ms-grid-column: 1;"></div>
    		<div style="-ms-grid-column: 2;">I Want a margin on my right...</div>
    		<div style="-ms-grid-column: 3;"></div>
    	</section>
    	<section style="white-space: nowrap;">
    		<div></div>
    		<div></div>
    	</section>
    </body>

    -Jeff

    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 2:10 PM
    Moderator

All replies

  • How about adding a dummy div:

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style>
    		section {
    			border: 1px solid blue;
    			overflow-x: scroll;
    		}
    		div {
    			display: inline-block;
    		}
    		div:first-child {
    			margin-left: 120px;
    			width: 800px;
    			height: 200px;
    			background-color: #ff0000;
    		}
    		div:nth-last-child(2) {
    			margin-right: 120px;
    			width: 800px;
    			height: 200px;
    			background-color: #00ff21;
    		}
    	</style>
    </head>
    <body role="application">
    	<section style="display: -ms-grid; -ms-grid-columns: auto">
    		<div style="-ms-grid-column: 1;"></div>
    		<div style="-ms-grid-column: 2;">I Want a margin on my right...</div>
    		<div style="-ms-grid-column: 3;"></div>
    	</section>
    	<section style="white-space: nowrap;">
    		<div></div>
    		<div></div>
    	</section>
    </body>

    -Jeff

    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 2:10 PM
    Moderator
  • Sorry for the delay, I was on summer vacations. Well for the dummy div, it's a solution, but I don't really like it for the simple reason html is better used to described the structured content and the css should on how to display it. So a css based solution would be prefered.
    Monday, September 17, 2012 1:33 PM