CSS problème de formatage oxes pas en ligne

Question

Les boîtes étaient sur une ligne maintenant ils ont été frappés sur trois pourquoi est-ce?

CSS:

#case_studies { margin:10px 0 0 5px; } 
      .case_study { float:left; width:258px; padding-left:19px; }    
      #case_studies .strip { width:279px; height:30px; margin:15px 0 20px -19px; } 
       #case_studies h3.tri { background:transparent url("../images/ico_triangle.gif") no-repeat left; font-size:1.3em; padding:10px 0 10px 20px; } 
      #case_studies .content img { margin-bottom:10px; } 
       .light_green img { border:1px solid #7ac63c; } 
       .light_orange img { border:1px solid #fa7605; } 
       .light_blue img { border:1px solid #4dacd8; } 

      #case_studies .green { background:#7ac63c url("../images/bg-greenstrip.gif") repeat 0 0; height:40px;} 
       #case_studies a.green { background:transparent; text-decoration: underline; color:#7ac63c; } 
       .light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; } 

      #case_studies .orange { background:#82c1f1 url("../images/bg-orangestrip.gif") repeat 0 0; height:40px; } 
       #case_studies a.orange { background:transparent; text-decoration: underline; color:#fa7605; } 
       .light_orange { background:#feddc0; width:260px; margin:0 15px 15px 0; }  

      #case_studies .blue { background:#82c1f1 url("../images/bg-bluestrip.gif") repeat 0 0; height:40px;} 
       #case_studies a.blue { background:transparent; text-decoration: underline; color:#4dacd8; } 
       .light_blue { background:#d2eaf5; width:260px; margin:0 15px 15px 0; } 
      .case .content { padding:10px; } 

HTML:

<div id="case_studies">  
    <div class="case_study light_green"> 
     <div class="strip green"><h3 class="tri">Industrial</h3></div> 
     <div class="content case"> 
       <?php wp_reset_query(); ?> 
       <?php query_posts('category_name=Industrial&showposts=1'); if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" /> 
        <?php the_content(__('')); ?> 
       <?php endwhile; ?> 
       <?php endif; ?> 
     </div> 
    </div><!-- Featured Box END --> 

    <div class="case_study light_orange"> 
     <div class="strip orange"><h3 class="tri">Commercial</h3></div> 
     <div class="content case"> 
      <?php wp_reset_query(); ?> 
       <?php query_posts('category_name=Commercial&showposts=1'); if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" /> 
        <?php the_content(__('')); ?> 
       <?php endwhile; ?> 
       <?php endif; ?> 
     </div> 
    </div><!-- Featured Box END -->   

    <div class="case_study light_blue"> 
     <div class="strip blue"><h3 class="tri">Domestic</h3></div> 
     <div class="content case"> 
      <?php wp_reset_query(); ?> 
       <?php query_posts('category_name=Domestic&showposts=1'); if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" /> 
        <?php the_content(__('')); ?> 
       <?php endwhile; ?> 
       <?php endif; ?> 
     </div> 
    </div><!-- Featured Box END --> 
</div>  

Answer 1

C'est parce que vous avez http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css:

#page_case_studys { float:left; width:400px; margin-left:10px; }

qui oblige les conteneurs suivants dans cette boîte. Depuis 260 * 3 = 780, vous avez besoin d'au moins une boîte de 780 pixels, sans aucun rembourrage ou marge supplémentaire. Si vous avez spécifiquement besoin de #page_case_studys pour avoir une largeur de 400px sur votre site, je vous suggère d'écrire un style CSS plus spécifique pour que la page cible l'élément et définisse la largeur sur auto.

En outre, les boîtes tous ont une largeur de 260 en raison de la règle suivante dans la même feuille de style:

.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }

Si vous utilisez Firefox, téléchargez Firebug et l'utiliser pour vous aider à résoudre vos problèmes CSS. Dans Chrome, vous pouvez cliquer avec le bouton droit sur l'élément et accéder à "Inspecter l'élément".

Liens connexes:

http://htmldog.com/guides/cssadvanced/specificity/

http://www.w3.org/TR/CSS2/cascade.html

Answer 2

En base.css, ligne 79, vous avez:

#page_case_studys { 
float:left; 
margin-left:10px; 
width:400px; 
} 

Vous devez augmenter la espacer pour faire place à tous les 3 des boites.