I've been playing around a little and came up with this:
Code: Select all
.hbox{
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
.vbox{
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
}
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>CSS box-orient example</title>
<style>
.hbox{
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
border: 3px solid red;
background-color:deeppink;
}
.vbox{
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
border: 3px solid blue;
background-color:cornflowerblue;
}
.mainBox{
border: 5px solid black;
font: 14px Arial;
color: white;
background-color:gainsboro;
}
</style>
</head>
<body style="color:white;">
<div class="hbox">
<div>first line of a hbox that should contain this div and two other vbox divs to the right</div><br>
<div class="vbox">
<div>first line of vbox in a hbox. It should be in its own box to the right. Instead it is below the preceeding div.</div>
<div>second line of vbox in a hbox</div>
<div>third line of vbox in a hbox</div>
</div><br>
<div class="vbox">
<div>first line of vbox in a hbox</div>
<div>second line of vbox in a hbox</div>
<div>third line of vbox in a hbox</div>
</div>
</div>
</body>
</html>