Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

screenshot of my hand-coded website, behaving as expected

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

Staircase effect I'm seeing in WordPress my WordPress Theme

share|improve this question
1  
Not sure this is a WordPress question per se. Still, a live link would be extremely useful for helping to debug this. –  editor Feb 9 '11 at 15:13
    
This CSS question is acutally not related to wordpress. I therefore voted to close it, this belongs to a webmaster or css forum community. –  hakre Feb 9 '11 at 15:20
1  
I don't know, Hakre, because I am experiencing this behavior only in Wordpress. The very same style is behaving nicely in HTML 4.01 Transitional//EN on a hand-coded website. I am wondering whether it is related to the WordPress theme I'm using. Sorry, cannot give a live link, because it is a local installation. –  Das Feb 9 '11 at 15:40
    
@Das - If you don't know, why are you asking the question here then, and not, let's say on a general CSS forum? –  hakre Feb 9 '11 at 17:13
    
Hakre, the CSS checks out okay - see jsfiddle.net/EVErR, but WordPress seems to mangle it. I'm using the code in creating a Page, which is then called to the home page. –  Das Feb 10 '11 at 0:48

2 Answers 2

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>
share|improve this answer
    
and div .box-container { display: inline; margin: 0.63em 0pt ... -- inline elements do not have margins. –  hakre Feb 9 '11 at 15:19
    
Denis, thank you for your quick reply. I've since removed padding in the div box-container, and compensated in the div small-box by changing the margins to 20px 0px 20px 15px; - which works out well in terms of space. However, I'm still seeing a staircase. Re the div box-container, do you mean I should eliminate the margins or eliminate the display:inline? In any case, I tried both, and nothing has changed. –  Das Feb 9 '11 at 15:30
    
Only IE in "Quirks Mode" doesn't add the paddings, all others behave to the W3C box model. So if you use the correct doctype to trigger Standards Mode there should not be a problem with this approach. –  Jan Fabry Feb 12 '11 at 16:09
up vote -1 down vote accepted

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.

share|improve this answer
    
It may be interesting to note whether you had the WordPress should correct invalidly nested XHTML automatically option checked in Settings > Reading. –  t31os Feb 11 '11 at 10:42
    
t31os, in this version of WordPress, I see no such option in Settings > Reading. WordPress v 3.0.4 is using html 5, not XHTML. –  Das Mar 9 '11 at 10:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.