blob: 3d64994c2a37622eb15235c2260dca07a9a41cee [file] [log] [blame]
<!DOCTYPE html>
| Set "auto" values for "margin-left" and "margin-right" to 0, and pick the one
| of the following six rules that applies.
| 1. "left" and "width" are "auto" and "right" is not "auto", then
| the width is shrink-to-fit. Then solve for "left".
| 2. "left" and "right" are "auto" and "width" is not "auto", then set
| "left" to the static position. Then solve for "right".
| 3. "width" and "right" are "auto" and "left" is not "auto", then
| the width is shrink-to-fit . Then solve for "right".
| 4. "left" is "auto", "width" and "right" are not "auto", then solve
| for "left".
| 5. "width" is "auto", "left" and "right" are not "auto", then solve
| for "width".
| 6. "right" is "auto", "left" and "width" are not "auto", then solve
| for "right".
.first {
top: 10px;
.second {
top: 45px;
.third {
top: 80px;
.fourth {
top: 115px;
.fifth {
top: 150px;
.sixth {
top: 185px;
.containing-block {
background-color: #2196f3;
height: 5px;
padding: 10px 0;
position: absolute;
width: 500px;
.block {
/* TODO: Add borders when supported. */
background-color: #3f51b5;
display: block;
height: 5px;
margin: auto;
padding: 0 100px;
position: absolute;
.auto-left {
left: auto;
.non-auto-left {
left: 50px;
.auto-width {
width: auto;
.non-auto-width {
width: 150px;
.auto-right {
right: auto;
.non-auto-right {
right: 50px;
<body dir="rtl">
<div class="first containing-block">
<div class="auto-left auto-width non-auto-right block"></div>
<div class="second containing-block">
<div class="auto-left non-auto-width auto-right block"></div>
<div class="third containing-block">
<div class="non-auto-left auto-width auto-right block"></div>
<div class="fourth containing-block">
<div class="auto-left non-auto-width non-auto-right block"></div>
<div class="fifth containing-block">
<div class="non-auto-left auto-width non-auto-right block"></div>
<div class="sixth containing-block">
<div class="non-auto-left non-auto-width auto-right block"></div>