I am struggling to position my platform divs, each with 3 children-divs, horizontally inside the wrapper div. Despite setting the '-webkit-box-orient' property to horizontal for both the platform div and its children, I cannot get it to work. Any tips on how to resolve this issue would be greatly appreciated! Thanks in advance! - 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>
//CSS styling:
#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;
}