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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBoxOrient

MozBoxOrient style property | webkitBoxOrient style property

Browser support:

MozBoxOrient

webkitBoxOrient

Specifies or retrieves 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).

Syntax:

object.MozBoxOrient;
object.webkitBoxOrient;

You can find the related objects in the Supported by objects section below.

MozBoxOrient:	This property is read/write.
webkitBoxOrient:	This property is read/write.

CSS page for this property: -moz-box-orient

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBoxOrient property in JavaScript:

<head>
    <style>
        .example {
            display: -moz-inline-box;
            border: 5px solid red;
            -moz-box-orient: vertical;
        }
    </style>

    <script type="text/javascript">
        function ChangeBoxOrient (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected option's text
            var boxOrient = selectTag.options[whichSelected].text;

            //Changes the value of the property
            var div = document.getElementById ("myDiv");
            div.style.MozBoxOrient = boxOrient;
            
            // Solve refresh problems
            div.className = "";
            div.focus ();
            div.className = "example";
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        <div>test -moz-box-orient property.</div>
        <input type="radio" />
    </div>

    <select onchange="ChangeBoxOrient (this);" size="3">
        <option selected="selected" />horizontal
        <option />inherit
        <option />vertical
    </select>
</body>