Trying to get fluid - getting overlapping text - can I have your advice?

HTML & CSS
1

Hello,

I’m still away from finish but, I’m trying to build my first fluid layout. Unfortunately, I’m getting some headaches.

If you narrow down your window here, and you look at the three columns at the bottom over the white background, you will notice that, at same point, the headings overlap over each other.

http://tinyurl.com/8dtbv72

Also, the same “effect” seems to happen to the gray button down the page. The text doesn’t seem to go on the flow when you shrink the page.

I’m not sure if this IS the best result we can get, and if we must use media queries from here, OR if it’s still indeed something that needs to be done so that this, pretentious fluid layout could became indeed, a true fluid layout, before, start digging on those media queries.

Please advice.

2

Yeah, text can’t scale like you want on its own, so this would be a handy time to use @media, and set the font size to something smaller on a narrower screen. But the other (better) option is, at some point, to make the divs site on top of each other—again, using @media.

3

As for the button, set display: inline-block; and remove the width. Then the button will just be as wide as it needs to be.

Then get started with the media queries :slight_smile:

The first thing you might want to do is make the .mini-wrapper wider for smaller browser windows:


@media screen and (max-width: 60em) {
	.mini-wrapper {
		width: 90%;
	}
}
4

Thank you both.

As for the button, I wish not to have inline-block, due to IE7 bad behavior on that.

Isn’t there any other option, or should I conditional target that bad browser with display:inline; and zoom:1; ?

What would you do ?

Thanks again, and thanks for the tip related to media queries.

5

Regarding the button, I wouldn’t use a % width on it. There’s no point for something so small anyway. But I agree that inline-block would be a good option. Yes, you can provide that hack for IE7. Personally, I don’t bother with it any more … like I don’t bother feeding my dead ancestors. :shifty: