Div has inexplicably huge right margin?

Question

I have a sidebar div that for some reason has an absolutely massive right margin and I cannot figure out why this is happening. This screws up the floats for the rest of the stuff on my page and need your help to figure out why this is happening.

I've checked the rest of my CSS for any kind of conflicting CSS that might be assigning a huge margin but can't seem to find any.

I understand some of this is out of context but just bear with me.

The div

<div id="leftsidebar">
    <h2> Yesterday's Games </h2>
    <img src="images/dividerSmall.gif" />
    <div class="gamelist">
        **gamelist is populated by MySQL database**
    </div>
</div>

The CSS for any related divs

#leftsidebar {
    position: relative;
    padding-left: 10px;
    width: 225px;
    margin-right: 0px;
}

.gamelist {
    height: auto;
    width: 225px;
    padding-left: 20px;
    margin-top: -27px;
}

Answer 1

You did not use float in your css. Try using that i.e. float:left; in your #leftsidebar and .gamelist. Might help :)

Answer 2

Well from looking at your CSS, #leftsidebar has an actual width of 235px (225 width + 10 padding) and .gamelist has an actual width of 245px (225 width + 20 padding). This is because padding is always accounted for in the total element width.

So if you take those two numbers and offset them, you will get a 20px overflow of .gamelist. Why? Because .gamelist is positioned 10 pixels to the right due to the padding on #leftsidebar. So the correct width for .gamelist should have been 205px (225 width - 20 padding).

See http://jsfiddle.net/e8N5N/3/ for an updated example.