Expanding the .charsheet div?

I've been styling the background of my custom character sheet this whole time by simply using the background-color property. However, after I add a certain amount of elements, the height of the character sheet exceeds that of the calculated character sheet height, any elements added after extend past the div boundaries, and the rest of the sheet is not styled. Is there some way to account for this or will I have to make my character sheet expand horizontally rather than vertically?

How exactly are you setting the background color? Could you give some sample code?

It's pretty simple. .charsheet { background-color: #353535; height: 100%; width: 100% } Like I said, it works perfectly fine up until I add an element that extends past the bottom border of the character sheet, because the .charsheet div itself is fixed-width (due to the screen size calculations, I assume).

Well, clearly the character sheet is fixed-width and fixed-height, you have forced it to be! Remove the height: 100% and the .charsheet will automatically be as large as its contents, which sounds like it's what you want. Or if you want it to always at least stretch out to the window height , use min-height: 100% instead.

I'm afraid that solution isn't working. I also tried just eliminating any height or width modifiers at all, but that's not working either.

It looks to me like the problem is actually the floating div on the right expanding beyond your background. Try using the clear property. Here's a webpage explaining how that works.&nbsp; <a href="https://css-tricks.com/almanac/properties/c/clear/" rel="nofollow">https://css-tricks.com/almanac/properties/c/clear/</a> Edit: I got my left and right mixed up....

Yep, that turned out to be the problem. Using overflow: auto solved my issue. Thanks!