In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > browser specific extensions > -moz-box-orient

-moz-box-orient property | -webkit-box-orient property

Browser support:

-moz-box-orient:

-webkit-box-orient:

Specifies whether the children of a box element should be laid out horizontally or vertically.

Only works for box objects. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).

JavaScript page for this property: MozBoxOrient | webkitBoxOrient. You can find other example(s) there.

Possible values:

One of the following values:

block-axis

The children of the element are placed on the block axis.

horizontal

The children of the element are placed horizontally in a row.

inherit

Takes the value of this property from the computed style of the parent element.

inline-axis

The children of the element are placed on the inline axis.

vertical

The children of the element are placed vertically in a column.

Default: horizontal.

Example HTML code 1:

This example illustrates the use of the -moz-box-orient and the -webkit-box-orient properties:

<head>
    <style>
        .horizontalBox {
            display: -moz-inline-box;
            display: -webkit-inline-box;
            border: 5px solid red;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
        }
        .verticalBox {
            display: -moz-inline-box;
            display: -webkit-inline-box;
            border: 5px solid red;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="horizontalBox">
        <div>Horizontal box</div>
        <input type="radio" />
    </div>
    <div class="verticalBox">
        <div>Vertical box</div>
        <input type="radio" />
    </div>
</body>