Question

my platform divs (several squares according to rows in database) with 3 children-divs inside are positioned vertically inside the wrapper div instead of horizontally. I set the ‘-webkit-box-orient’ to horizontal for the platform div as well as for its 3 children but I don’t get it to work. Thank you for your tip! Hobby

<div id="wrapper">


<?php
$platforms = get_platforms();

foreach ($platforms as $platform)
{
echo 
'<div class="platform">
    <div class="platform_left"></div>
        <div class="platform_middle"></div>
        <div class="platform_right"></div>
    </div>';
}
?>

</div>

//And here is the css:


#wrapper{
max-width: 960px;
margin: 180px 0px;
border: 1px solid black;
background:-webkit-radial-gradient(top,#99CCFF,#E6F0FF);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
background:-moz-radial-gradient(top,#99CCFF,#E6F0FF);
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
}

.platform{
border: 1px solid blue;
margin: 30px 30px 0px 30px;
width: 435px;
height: 180px;
background: #99CCFF;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(110, 110, 100, .7) 8px 8px 8px;
-moz-border-radius: 5px;
-moz-box-shadow: rgba(110, 110, 100, .7) 8px 8px 8px;
display: -webkit-box;
display: -moz-box;
}   

Answer 1

divs inside od div.platform have same width as their parent (div.platform)

you have to set them width: 33% (or less in case you want to use borders,margins and paddings) and then set float property to left.

there is not need of editing PHP part

W3c says:

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

sorry for my english