div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;

/* W3C */
display:box;
box-orient:horizontal;
}

Try it yourself »

Browser Support

The box-orient property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-box-orient property.

Safari, Opera, and Chrome support an alternative, the -webkit-box-orient property.

Definition and Usage

The box-orient property specifies whether the children of a box should be laid out horizontally or vertically.

Tip: Children within a horizontal box are displayed from left to right, and children within a vertical box are displayed top to bottom. However, the box-direction and box-ordinal-group properties can change this ordering.

Default value:	inline-axis
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.boxOrient="vertical"

Syntax

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

Value	Description	Play it
horizontal	Lay out children from left to right in a horizontal line	Play it »
vertical	Lay out children from top to bottom vertically	Play it »
inline-axis	Lay out children along the inline axis (map to horizontal)	Play it »
block-axis	Lay out children along the block axis (map to vertical)	Play it »
inherit	The value of the box-orient property should be inherited from the parent element