CSS Fix: Backgrounds that overlap floats
It’s been quiet around here lately due to struggling with a helluva cold for the past 2 weeks all while the deadline for my major work project loomed closer. There were times where I would be up working on it at 4am because if I can’t sleep from trying to cough up a lung, I might as well do something useful right?
Anyways, the major project is a complete site redesign that I designed and coded all by myself, and then another coworker and I moved over about 2000 pages worth of content to the new templates. It’s been a lot of work but the end is in sight; it’s due to launch next week.
While I was creating the design, I came across a curious problem. I had a .button class which was just a link styled all prettily to look more like a button. Normally it had the property display:inline-block which gave it block-like properties yet still flowed inline with the rest of the content. So the width and height would grow or shrink depending on the text within it.
In the cases when the .button link was in the narrow sidebar, I wanted it to span the width of the sidebar no matter how much text was in it. Just change to display:block and ta-da! It works and looks great.
Except apparently when it’s positioned beside a floating image. Then the background extends across the whole box, overlapping the image. That’s not what I want. I want it to stop at the margin of the image, not go over it.
It turns out that this happens with any block element with a background when it’s next to a floating element. I suppose normally you’d set a width and be done with it. But I want this design to be responsive and if the button link happens to be below the image, I want it to span the width of the sidebar again.
Googling for a solution wasn’t working out very well; I couldn’t see to find anyone else with the same issue. Then while reading an unrelated article, I came across the answer: the overflow property.
The default value for overflow is visible, so if you don’t have overflow specified as anything different, the background of the block element will stretch underneath a neighboring floating element. In my case, the background appeared over top of the floating image because I set the .button class to have a higher z-index. Either way it looked bad and needed to be fixed.
The solution is simply to add overflow: auto to the .button class. This causes the button link to respect the boundaries of the floating image and stop it from overlapping.
The overflow property isn’t something I use with much frequency and it wasn’t something that even occurred to me to try to fix this. Just goes to show that sometimes you’ll find the answer in an unlikely place.
The downside to this fix is that if you add a width or height to the block element, you run the risk of getting little scroll bars within the element which is also unsightly. If you’re content to let it expand as it needs to, this shouldn’t be a problem though.
I hope that if someone else comes across this same issue, this post will help them and save them an hour or so crawling through search results. 🙂
Happy coding!