Content area not expanding with the content within it!

I have been coding a design I had been working on for a week or so and have core across a snag.

While doing the HTML/CSS of one of my right column modules the content within it expands however the bg and bordered area it is within does not.

htttp://www.gamefriction.com/Coded/ (ur开发者_开发技巧l with example) http://www.gamefriction.com/Coded/css/style.css (css stylesheet used on page)

This website is purely HTML and CSS at this time all code can be viewed through the View Source option on all browsers.

The area that is not working properly is the bullet links in the right module with the blue background that says "League Menu".

The content above that will make the module background expand however the linked bullet menu will not.

Before doing anything else, pick a doctype. The one you have right now defaults to quirks mode in all browsers which, quite frankly, is going to give a lot of interesting results depending on what browser you are viewing the site in.

I'd recommend html 4.01 strict, but some people like the xhtml strict option as well. Either way, make sure the doctype is formatted correctly. Otherwise it's still going to default to quirks.

Once that is done you'll have a set of rules that are dependable that you can work with.

UDPATE: Okay, now that you have a good doctype. Add another div inside the league_menu_links to clear the floats from the league_link_wrap divs. exa:

<div id="league_menu_links">
<div class="league_link_wrap">some text</div>
<div class="league_link_wrap">some text</div>
<div class="league_link_wrap">some text</div>
<div style="clear:both;"></div>
</div>

That will signal to the browser that the floated divs are to be contained by that outer div and cause the outer div to expand accordingly

Since you're floating the elements inside the #league_menu_links div, it is not expanding with it's children.

One hack-around would be to add an empty div with clear:left; as the last element child of #league_menu_links, like so:

<div id="league_menu_links">
    <div class="league_link_wrap">
        ...
    </div>
    ...
    <div style="clear: left;"></div>
</div>

I also suggest using ul and li instead of divs, in that situation. It is a list of items, after all.

Instead of using the clearfix method, many people also add a style declaration of overflow: hidden; to your div#league_menu_links.

This will make that div know the height of its children and wrap around them. The one downside to this is if in the future you give that wrapping div a defined height, then the content will appear to be cut off.