Question

When I try to position #slider, the navigation and everything above it also positions. Like if they was wrapped in #slider, but they are not

HTML:

<div id="slider" class="clearfix">
        <div class="content">
            <h2> This is a header </h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim                 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in                          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia                        deserunt mollit anim id est laborum.
            </p>
        </div><!-- .content -->
        <div class="images">
            <img src="images/slider-twitter.png" alt="">
        </div><!-- .images -->


    </div><!-- #slider -->

CSS:

#slider {
    margin: 2px auto;
    width: 821px;
}

#slider .images { float: left; }
#slider .content { float: right; width: 365px;  }

Working Problem:
http://jsbin.com/oriwe3

Answer 1

You have a clearfix class but you don’t define it. I’d recommend giving .images a width, too.

An alternative to clearfix is overflow:hidden; on #slider.

Let me know if that isn’t what you need.