Got a bit of a problem with the styling of a list. Here is a screen shot. The list is hanging out of the DIV that it should be contained within. Here is the HTML: And here is my CSS: I have tried using the "clear:" selector on the li and the ul item but has not worked. Another thing to note I am also using the following CSS Reset: Hope you guys can help. Many Thanks.
Parent elements are never to expand to contain floated elements. Adding clear to the li affects how the li relates to other floated elements but not the parent. To get the div to expand to contain the ul, add 'overflow:auto' to that div.
Setting div#right-column width to 100% will push it below the div#left-column. You're right about the parent elements not expanding to contain floated elements, however it's hard to make a conclusion without seeing the whole HTML & CSS. If the parent divs are floated as well for example, which I presume they are from the 2 column layout, then it will expand to contain the floated list. Thinking about it, does he even need the 'float' and 'clear' on the '#right-column li'? Seems illogical to me considering you're trying to tell each list item to float left, then telling them to make sure there's nothing floating to it's left. Also I think the issue isn't that the containing div isn't expanding to accommodate for the list. It's more the list is in the wrong position. Unless I missed something, from looking at the HTML and CSS the list should be sitting nicely under the paragraph in the right hand column like in the picture I'm attaching. I guess there's some other underlining issue with the rest of the HTML/CSS that is causing this, and therefore again, please link us the website in question.
That's the first thing that grabbed my attention - why would you float them if you're just going to clear them? Makes no sense. Remove all that floating nonsense, end of problem. Oh, and you might want to do yourself a favor and trim the fat off that reset - Reset reloaded and other giant resets take it too far, SETTING values you are likely to just have to unset... like if you aren't using tables for layout you most likely don't need or even want border-collapse, like the vertical-align:baseline makes using line-height to center elements difficult/impossible... like the outline on focus is there for accessibility reasons don't **** with keyboard users like that, etc, etc... Really though - why are you floating them? What possible reason could you have for doing that?