I found this neat tip on how to equally space divs within a container: Fluid width with equally spaced DIVs
I tried it out using static HTML and it works just fine:
<div class="category_area">
<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div>
<div class="news_box shadow"><div class="inside">B</div></div>
<div class="news_box shadow"><div class="inside">C</div></div>
<div class="news_box shadow"><div class="inside">D</div></div>
<span class="stretch"></span></div>
And then I did this programatically with PHP:
<?php
echo "<div class='category_area'>";
for ($i=0;$i<4;$i++) {
echo "<div class='news_box shadow'><div class='inside'><h2><a href='#'>Test</a></h2></div></div>";
}
echo "<span class='stretch'></span></div>";
However, the PHP version does not work although when I view the source through the browser the resulting HTML is identical. I am thinking this is because of the way PHP is rendered.
Here's my CSS:
.category_area {
text-align:justify;
-ms-text-justify:distribute-all-lines;
text-justify:distribute-all-lines;
}
.category_area .news_box {
width:200px;
height:250px;
vertical-align:top;
display:inline-block;
*display:inline;
zoom:1;
background:#fff;
padding:10px;
}
.category_area .news_box .inside {
display:block;
}
.stretch {
width:100%;
display:inline-block;
font-size:0;
line-height:0;
}
.shadow {
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
box-shadow: 3px 3px 4px #999;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
}
Here's how it looks when the source is viewed through the browser (static one):
<div class="category_area">
<div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div>
<div class="news_box shadow"><div class="inside">B</div></div>
<div class="news_box shadow"><div class="inside">C</div></div>
<div class="news_box shadow"><div class="inside">D</div></div>
<span class="stretch"></span></div>
PHP version:
<div class='category_area'><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><div class="news_box shadow"><div class="inside"><h2><a href="#">Test</a></h2></div></div><span class="stretch"></span></div>
Any tips on how to make this work?