Hi everyone, I’m stuck with this css code problem. The backgroun color is not covering up the entire section or div. Here’s the image:
My site is: http://www.skinwhitening101-intl.com/
.features_more needs overflow:hidden; It needs to contain the children.
Googling “clearing and containing floats” for more articles on this.
If i understand the problem correctly is that you have a containing div and within it you have 2 floated divs. The containing div doesn’t then take up the entire area.
i think there are some better ways to do it but the way i solve it is that you need to add a <div style="clear:both;"></div> after the 2 floated divs but before the closing container div tag. This should force the container to be the full size.
That forces an extra HTML element. Far from ideal. I would advise against this. Not trying to be confrontational but I just want the OP to understand that he has a few choices.
- overflow:hidden; on the parent.
- The clearfix method (google for articles.)
These two are the best and only require a few lines of CSS.
- Clearing element like Noppy says. This is bad since it requires an extra HTML element.
- Floating the parent (doesn’t solve anything since the next parent needs to contain…)
agreed not the best solution as as you say adds a mostly redundant element but it does still validate and if you use anything like drupal it’s full of random divs 
For 1. doesn’t that just cut off the floats?
might have to change what i do once i get my head around it 
Two wrongs don’t make a right .
Nope. Unless the parent has a set height it won’t cut anything off. And no heights should be set for content sections anyway as that’s horrible practice.
Well, Actually I don’t make any changes with the div or so with this section. What i did is I added a post and when it showed up in the home page it suddenly mess up the background. What I’m thinking is could be a bug with the theme that I am using?
ha you are indeed correct and to be honest it’s one reason i write my own cms systems to avoid the bloated code.
I’ll give the overflow a try and see how it fits with what i’ve done so far. At worst i might have set a min-height but yep everything should be able to expand as the text is zoomed etc. Be useful if it’s that simple
Well I’ll go ahead and give it a shot. Thanks men. Thank you also RyanReese for your tips. you both helps me a lot.
Not a bug. I explained what was happening. What issues are you having now? Did you try my fix?
It fits almost all cases. For those cases where it can’t be used (e.g. if you have a floated menu that has a dropdown) you can’t use overflow there as it will clip the dropdown. That’s a case for clearfix.
Nope, won’t even need that. Setting a min-height on floated elements is just a band-aid fix. That doesn’t solve the problem 
.
It’s THAT simple .
Yes, I did and it fix my problem. Thank you so much!
thanks. Just to save face slightly i actually normally set the ‘clear both’ as a class eg <div class="clear_all"></div> rather than the even dirtier <br style="clear:both" /> as at least if i change styles i could just change the class rather than have to remove a load of
tags from throughout the code.
But i shall adopt this approach going forward.
Learn something everyday. thanks
I was going to comment about the inline styling you did but I figured it was more pseudo-code than anything .
Yes there is no need to add extra mark up these days just to contain floats as there are always better options available.
There are still mis-conceptions about the overflow-hidden method (actually discovered by me 10 years ago) and coders to this day do not realise that it works to contain floats because it creates a new ‘block formatting context’ and in that context the floated children are contained automatically. There are other elements that create block formatting contexts such as display;inline-block, display:table-cell and position:absolute to name a few. All those elements will also auto contain floated children.
The overflow method (other than visible) is the easiest fix to contain floats but you do have to ensure that you don’t need visible overflow at some time (drop down menus, modals, or tooltips etc…). If you do need visible overflow then you can use one of the other elements that create a block formatting context of indeed use the tried and trusted clearfix method.
In the end its a choice you make depending in the layout in hand. There is no one solution.
The clearfix method is good but uses up the before and after elements and I like to use them for additional styling on occasions.
These days I would not use an empty div in the html to contain floats unless there was a reason for that div to be there. Sometimes sections can be divided using an ‘hr’ and then that would make a good candidate to use as a float clearer and add some semantics to the page.
In the end it all boils down to what’s best for the job in hand
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.