Question

I have .content-left and .content-right, which are intended to be floated left and right, respectively. My problem is that the two divs are both set to width:300px, which is considerably less than the width of the container(960px). I think this is what’s causing such a large gap between .content-left and .content-right. My question is- how do I lessen the gap? Negative padding and margins don’t seem to work in this case.

CSS:

#container {
    margin: 0 auto;
    width: 960px;
}

.content-left {
    float: left;
    width: 300px;
}

.content-right {
    float: right;
    width: 300px;
}

HTML:

<div id="container">
    <h1>Heading.</h1>
    <div class="content-left">
        //left side content
    </div><!-- end content-left -->
    <div class="content-right">
        //right side content
    </div><!-- end content-right -->
</div><!-- end container -->

Answer 1

Try floating both to the left. Then use some margin

If you really want to use float left and float right, adding margin-right to the one floated right will work.