How can I make a div expand vertically to fit it's float'ed content?
October 8, 2009 2:07 PM Subscribe
I'm racking my brains trying to figure out what seems to be an easy problem I'm having with CSS. It has to do with a div not resizing to contain two floated div's inside it.
posted by arcolz to computers & internet (10 answers total) 6 users marked this as a favorite
I've uploaded example HTML file
to help clarify what I am saying.
What I am trying to do is put "previous" and "next" links at the bottom of each post of my wordpress theme. I want them to be inside a box with a border. The "previous" link should be flush against the left margin of the box and the "next" link should be flush against the right margin of the box. The problem I am having is that when I set the "previous" link to float left and the "next" link to float right, their parent box with the border does not expand vertically to contain them.
As I understand, the CSS 2.1 spec explicitly states that this is what should be occurring in the case, as boxes do not expand to fit floated children unless the box itself is floated. So, I'm trying to find a way to prevent this behavior. I could set the parent box to float as well, but that seems to raise more problems then it solves, especially in regards to its width and how the boxes after it flow.
So I'm stuck, any way around this?