Strange problem in Chrome (ok in FF)

HTML & CSS
1

My design is ok in FF but in Chrome there is a gap at the bottom of the content panel.

I have done everything I can think of to fix this but nothing works.

Any help appreciated?

http://errors.simplrweb.com/index.html
http://errors.simplrweb.com/inner.html

Thanks.

2

The problem is being caused by display:inline-block; in the clearfix code. So I would just remove the class=“clearfix” from the content-middle div and instead add overflow:hidden (a simple alternative) to the styles for that div:

#content-middle {
	background: url(images/content_middle.png) repeat-y;
	padding: 0px 0px 20px;
        [COLOR="Red"]overflow: hidden;[/COLOR]
}

EDIT: same with content-blog-middle, of course. :slight_smile:

3

It worked Thanks!
I did not realize that was possible.

4

You’re welcome!

Do you mean the problem with clearfix, or the use of overflow:hidden? Overflow is a really simple fix for containing floats, and is generally a great option unless you actually want to have some content overflowing the container (like an absolutely positioned element).

5

I mean clearing floats with overflow: hidden. I just read the article on you site about it and it helped.

I thought overflow: hidden was to keep contents within a fixed size box.

6

Yes, and basically that is its purpose. But it has this side effect that if the container is to do that, it first has to take a look at its content and make sure it is wrapping around it, which is what’s needed to enclose floats.

One this I perhaps should have mentioned is that there are variations to the clearfix code that help to avoid little bugs like you found. I’m not sure if this would have fixed the Crhome/Safari issue, but it’s worth a try:

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {display: inline-block;}

I find this version of clearfix more reliable.

7

From the recent threads, I wonder if we have to emphasise more the difference between containing floats and clearing floats. They often give the same desired result visually but are really different!

8

Unfortunately, these concepts are hopelessly confused right across the web. Certainly a clarification is worth having, though. Maybe in one of the stickies.