CODEWITHSUNDEEP
css
Hobby99
Hobby99

Reputation: 703

divs positioned vertically instead of horizontally php css3

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;
}

Upvotes: 0

Views: 170

Answers (2)

Jennifer B
Jennifer B

Reputation: 51

If your math is correct, there must be something else interfering. Are you using a CMS or anything else that might have some underlying CSS? Sometimes I find it helpful to not just inspect an element but to hover my mouse over an element with the element inspector turned on (if you don't know what I'm talking about, make sure you have something like Firebug in Firefox, or right click on element to inspect it in Chrome) -- this will show you the element's true dimensions. Also look at the "computed style."

If you see a width you don't expect, go further up the page and inspect each element until you find the one with an unexpected width.

I have this problem frequently when designing site themes with an underlying framework. If the math inside your wrapper is correct, something is squeezing the wrapper div's dimensions. Also look for gutters - unexpected padding or margins coming from another style sheet.

Upvotes: 0

miro
miro

Reputation: 780

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

Upvotes: 1

Related Questions