Struggling with WP 3.0.4 not showing my css styling correctly for aligning four boxes (divs) horizontally inside a container div. Interestingly, the same css rules work flawlessly on my hand-coded html/php website that uses HTML 4.01 Transitional//EN. However, in WP 3.0.4, the four boxes appear stacked like steps instead of aligned side by side.
Currently viewing in FireFox 3.6.13.
CSS:
div .box-container { display: inline; margin: 0.63em 0pt; padding: 10px; width: 640px; background-color: rgb(229, 231, 225); position: relative; float: left; overflow: hidden; }
div .small-box { border: 1px solid rgb(153, 51, 102); margin: 10px 5px; padding: 0.325em; float: left; background-color: rgb(255, 244, 227); width: 128px; line-height: 0.85em; max-height: 8em; min-height: 8em; position: relative; }
The structure of the HTML is as follows:
<div class="box-container">
<div class="small-box">SOME TEXT & IMAGE</div> <div class="small-box">SOME TEXT & IMAGE</div> <div class="small-box">SOME TEXT & IMAGE</div> <div class="small-box">SOME TEXT & IMAGE</div>
</div>
Although the box-container div has a specified width of 640px, the padding seems to extend it further. Nonetheless, this width should be sufficient to accommodate the combined size of the four small boxes totaling 512px along with their margins of 40px and the 20px padding within the box-container div.
It's puzzling how the padding affects the dimensions of the box-container div. When attempting to set max-width to 640px, all the boxes end up vertically arranged, resulting in the box-container div being narrower than 170px.
All the small-box divs are uniform in size, containing text and image elements.
In need of assistance?