CSS horizontal alignment for divs inside div container?

Having trouble with 开发者_JS百科WP 3.0.4 not displaying my css styling for horizontal alignment of 4 boxes (divs) inside a container div. NOTE: The same css styling works fine with HTML 4.01 Transitional//EN on my hand-coded html/php website. But WP 3.0.4 displays the four boxes stepped down from each other, like a staircase.

I'm using FireFox 3.6.13, btw.

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

HTML goes like this:

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

I don't understand why the padding pushes the size of the box-container div. But 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.

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

Help?

Some things I would try: * display: block in container * !important in all proprieties * font-size declare ( are you using 16px font-size? and in your theme has another value? ) * display: block in small boxes

[]'s

I think you need to remove the space from these lines:

div .box-container
div .small-box

like this:

div.box-container

Then, remove the padding rule from div.box-container.

To get back the padding, add a wrapper element inside div.box-container with the desired padding. Or, instead of adding an extra element, you could change the margin on div.small-box to margin: 20px 0 20px 15px to get it looking close.

I think I understand what you mean by staircase. It's usually happening to me when I forget to arrange width/heights with float left objects. So it's like each small box tries to float left, but browser thinks that there is something from the box before that, so it pushes the next one down to the "next line". This is the general logic I've always seen in "staircase" look boxes.

You might try to test with set width and heights first. And make sure that boxes fit as they should. Then go fo max-width and max-height.

Without screenshot and/or better a link, this is all I can say :)

Found the problem: WordPress had churned out invalid HTML. When I went to validate CSS and HTML, the CSS checked out clean, but the HTML was full of surprises. I didn't realize until I went to page source in the browser and saw that WordPress had put in a lot of paragraph tags and other tags, some list tags, which I certainly had not entered into the Page editor. Anyway, the HTML validator pointed out a paragraph end tag just inside the box-container div. It had no business being there - there wasn't even a beginning paragraph tag.

So I went back to the Page editor, eliminated all spaces between my HTML, and updated the Page. YAY! It's working just as it should.

Lesson learned: don't trust WordPress HTML editor without validation.

Many thanks to those who have replied. Especially helpful was the link to http://jsfiddle.net, very useful tool and reassured me that my CSS was correct.