Question

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/ (url 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.

Answer 1

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.