Why is the CSS horizontal alignment for divs inside div container not displayed in my WP Theme?

Question

WP 3.0.4 multisite network enabled, local installation with MAMP, PHP 5.3.2, WP THEME: Twentyten Child (Wordpress Theme)

Having trouble with not displaying my CSS styling for horizontal alignment of 4 div-boxes inside a div-container.

NOTE: The same css styling works fine with HTML 4.01 Transitional//EN on my hand-coded html/php website. But on my WordPress site, the four boxes stepped down from each other, like a staircase.

Same behavior in Firefox v3.6.13 and Safari v5.0.3.

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

My HTML:

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

The box-container div width is specified as 640px, but I notice the padding extends it beyond this.

In any case, it is plenty large to accommodate the four small boxes, which total 512px plus their total 40px margin, plus the 20px padding on the box-container div.

My Problem:

I don't understand why the padding pushes the size of the box-container div. When I tried to use max-width: 640px, I observed that the boxes all lined up vertically, and the box-container div was no wider than 170px. EDIT: The padding has since been removed from the box-container div, and margins adjusted on the small-box divs.

REAL PROBLEM IS AS STATED IN THE FIRST 2 PARAGRAPHS: The four small boxes are stepped down from each other, like a staircase. I want them to align horizontally.

The small-box divs are actually all the same size, their contents consist of text & image.

Help?

Edit:

Screenshot of my hand-coded website, behaving as expected:

Staircase effect I'm seeing in WordPress my WordPress Theme:

Answer 1

Never add a padding on something whose width/height you fix. Some browsers add the padding to the width/height; others don't. Use an inner div to work around the issue:

<div style="width:200px; height: 200px; background: red; padding: 10px;">
220x220
</div>

<div style="width:200px; height: 200px; background: green;">
<div style="padding: 10px;">
200x200
</div>
</div>

Answer 2

FOUND THE PROBLEM! WordPress had churned out invalid HTML. So it was not that WordPress would not recognize the CSS; it was that WordPress was generating paragraph elements willy nilly (and yes, I did enter HTML in the HTML field when creating the Page). I decided to validate the HTML and CSS. The CSS checked out. To get the HTML for the entire Page, I went to Page Source, selected all and copied, then pasted into the HTML validator's direct input field, and ticked the verbose feedback. The validator returned errors, and sure enough, WordPress had inserted a paragraph end tag (where there was no beginning tag) right inside the box-container div.

So I went back into the Page editor, eradicated all spaces between HTML code, tidied everything up, saved (updated), and VOILA! IT'S WORKING! :)

So you see, Hakre, it did have to do with WordPress after all. I've learned a lesson from this: don't trust WordPress HTML editor.

Thanks to everyone for your help.