Проблемы с форматированием CSS не включены

Question

Ящики были на одной линии, теперь они разбиты на три, почему это так?

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

Это потому что в http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css у вас есть:

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

Что заставляет следующие контейнеры в эту коробку. Поскольку 260 * 3 = 780, вам нужно, по крайней мере, поле размером 780 пикселей, не включая дополнительные отступы или поля.

Если вам необходимо, чтобы #page_case_studys имел ширину 400 пикселей на вашем веб-сайте, я бы предложил написать более конкретный стиль CSS для страницы, нацеленной на элемент, и установить ширину на auto.

Кроме того, все поля имеют ширину 260 из-за следующего правила в одной и той же таблице стилей:

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

Если вы используете Firefox, загрузите Firebug и используйте его, чтобы помочь решить ваши проблемы с CSS. В Chrome вы можете щелкнуть правой кнопкой мыши по элементу и перейти к «Проверка элемента».

Ссылки по теме:

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

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

Answer 2

В base.css, строка 79 у вас есть:

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

Вы должны увеличить остроту, чтобы освободить место для всех 3 коробок.