Question

I have two CSS float problems on this website ( http://melisayavas.com/web ) that I can’t figure out. The first one is right on the homepage. I have two javascript slides and one big empty space below them. Why?

The second problem is on the News page – http://melisayavas.com/web/?page_id=30 – where the sidebar simply doesn’t floats where it should. Again, I have no idea what element is stopping the float.

This is the HTML code in header.php:

    <article class="post" id="post-<?php the_ID(); ?>">
        <div class="homepage">
            <div class="testimonials"><?php slidedeck( 58, array( 'width' => '500px', 'height' => '550px' ) ); ?>
            </div>
            <div class="images"><?php slidedeck( 66, array( 'width' => '400px', 'height' => '550px' ) ); ?>
            </div>
        </div>
    </article>

This is the relevant CSS:

article, aside, figure, footer, header, hgroup, nav, section {
display: block;
overflow: hidden;
clear: both;
} 

 .post {
border: 2px solid;
border-radius: 10px;
clear: both; 
overflow: hidden; 
padding: 20px;
margin-top: 28px;
}

.testimonials {position: relative;}
.images {position:relative;margin-left: 543px; top: -556px; width: 100%;}

The HTML for the News page:

<div class="news-page">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div class="news">
    <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <?php include (TEMPLATEPATH . '/_/inc/meta.php' ); ?>
        <div class="entry">
            <?php the_content(); ?>
        </div>
    </article>
</div>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/_/inc/nav.php' ); ?>
<?php else : ?>
    <h2>Not Found</h2>
<?php endif; ?>
</div>

And the CSS:

  .news-page {
width: 100%;
  }

  .news {
float: left;
width: 60%;
  }
  #sidebar {float: right; width: 30%;}

Answer 1

At first, I suggest using firebug (for firefox) or Chrome because it has developer tools built in. IE has an alternative, called IE developers tool as well.

I’m using Chrome developer tools, when I inspected homepage class on your site, I saw that it’s computed width and height are 976px and 1100px, respectively. I had a look at your .css files and saw that height for .homepage class is not set anywhere. In other words, the div element has height of 1100px because it has content which stretches it to 1100px.

Your div.homepage contains this:

<div class="slidedeck_frame skin-fullwidth-sexy-black">
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px">
...
</dl>
</div>

<div class="slidedeck_frame skin-fullwidth-sexy-black">
<dl id="SlideDeck_275_58" class="slidedeck slidedeck_58" style="width:500px;height:550px">
...
</dl>
</div>

These two elements of height 550px each give the .homepage element height of 1100px.

Possible fix is setting height of .homepage directly (to 700px, for example).

As for second part of your question, you currently have this:
div.news-page has width: 100%, and is not set to float.
div.news are inside div.news-page.
div.news has width of 60%.
div#sidebar is set to float right and has width of 30%

Solution:

.news-page
{
width: 70%; // takes 70% of it's parent element, page-wrap
float: left;
}

.news
{
width: 100%; // takes all space available by it's parent
}

#sidebar
{
width: 30%; // takes 30% of it's parent element, page-wrap
float:  right;
margin-top: 30px; // so it does not cover your navigation bar
}