CODEWITHSUNDEEP
html
George Grigorita
George Grigorita

Reputation: 1890

div doesn't extend over other divs

I have a small HTML problem with this code: 

    <div id="primary">
    <div id="content" role="main">
        <div class="astro"><img class="astro" src="<?php echo get_template_directory_uri() . '/images/astro.png'; ?>" alt="Astro" />
        </div>

        <div class="planet"><img class="planet" src="<?php echo get_template_directory_uri() . '/images/planet.png'; ?>" alt="Planet" />
        </div>          
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1 class="entry-title"><a href="/learcenter/?page_id=13"><?php echo $page_data->post_title; ?></a></h1>
                <div class="entry-content"><?php echo $page_data->post_excerpt; ?>
                    <a href="/learcenter/?page_id=13">Read More...</a>
                </div>                  
        </article>  
            <div id="tour-center">
                <h1 class="entry-title">Tour Our Center</h1>

            </div>  

        <div id="news-section-title">           
            <h1 class="entry-title"><a href="<?php echo esc_url( get_permalink( get_page_by_title( 'Challenger News' ) ) ); ?>"><?php echo get_the_title(75); ?></a></h1>
            <div class="hr"></div>
        </div>

        <div class="news">  
            <div class="rss-news">
                <a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
                </a>
            </div>  
        </div>  

        <div class="news">          
            <div class="rss-news">
                <a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
                </a>
            </div>
        </div>

        <div class="news">

                    <div class="rss-news">
                        <a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
                        </a>
                    </div>
        </div>          

    </div><!-- #content -->
</div><!-- #primary -->

I've deleted some PHP code in between the divs so that the HTML is more visible. The problem is that the content div stops right after the news-section-title div and I can't figure it out why. It should extend until the end of the document, where the closing div is. You can view the code live on this website.

Upvotes: 0

Views: 84

Answers (2)

Gareth
Gareth

Reputation: 5719

div's won't wrap floated elements unless you use some kind of clearfix solution. Try adding overflow: hidden to the style of your content div.

Upvotes: 0

Uttara
Uttara

Reputation: 2534

just add this style to your content div

#content {
    float:left;
}

Upvotes: 1

Related Questions