CSS Formatting problem oxes not inline

Question

The boxes were on one line now they have been knocked onto three why is this?

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

It's because in http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css you have:

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

Which forces the following containers into that box. Since 260*3 = 780, you need at -least- a box of 780 pixels, not including any extra padding or margin.

If you specifically need #page_case_studys to have a width of 400px throughout your website, I would suggest writing a more specific CSS style for the page to target the element and set the width to auto.

Also, the boxes all have a width of 260 because of the following rule in the same stylesheet:

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

If you're using Firefox, download Firebug and use that to help solve your CSS issues. In Chrome, you can right-click the element and go to "Inspect Element".

Related links:

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

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

Answer 2

In base.css, line 79 you have:

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

You should increase the witdh to make room for all the 3 boxes.