CSS woes

[Lemmy]

Inspired by another thread and Jayeff's comments I've decided to give a tableless CSS design a shot for a project I'm working on, but I'm running into problems right off the bat.

I've got a 3-column design that looks good for what I need...but only in IE. In FF and Opera the right column expands. If there's a Guru out there who could take a look I'd be very grateful.

[HC-Majick]

Sent ya a pm...

[Preacher]

Quick answer, you're fucked.

What you're seeing is a result of the

PHP Code:

max-width: 36em; 


rule you have for the content div. If you want all browsers to act the same, I think you'd use something like this instead

PHP Code:

div {max-width: 675px; width:expression(document.body.clientWidth > 675? "675px": "auto" ); 


The problem is, that doesn't fix your problems, it only creates more. Now your content area floats are going to break when they page expands to far. The obvious solution to me would be to clear your floats, but as you've got necessary floats in the left and right columns, if you add any 'clear' to your content area, your entire page will break.

Honest opinion from a guy who's spent way to much time building complicated css only pages, use a simple table for the three columns, than you can float things within the table cells and you won't have any problems.

[Lemmy]

Originally Posted by HC-Majick

Sent ya a pm...

Thanks!

[Lemmy]

Originally Posted by Preacher

Quick answer, you're fucked.

Well I knew that!

Originally Posted by Preacher

Honest opinion from a guy who's spent way to much time building complicated css only pages, use a simple table for the three columns, than you can float things within the table cells and you won't have any problems.

That may very well be the best solution, or I could just say fuck you to FF users.

Seriously, this CSS stuff (once you go beyond simple text formatting) is awfully complicated and confusing for something that's supposed to make life simpler.

[Preacher]

Originally Posted by Lemmy

Thanks!

Did that PM fix things? Because if it did I'd love to know what I missed.

[Lemmy]

Originally Posted by Preacher

Did that PM fix things? Because if it did I'd love to know what I missed.

Majick was kind enough to share a design that works in both IE and FF. I'm sure he doesn't mind me passing it on. I'll check it out later.

[Lemmy]

I think I just fixed it! I removed the max-width and it looks good. The only reason it was there was to prevent very long lines (hard to read), but it looks OK on 19" monitor @ 1280 x 1024. So there shouldn't be any downsides, right?

[Preacher]

This is the problem I was talking about, and you may not care because not everyone will have a screen this wide:

PHP Code:

http://www.thisdepravedworld.com/graphics/news-items/07-05/float-problem.jpg 


It's because you have things floated in the center column, so as it expands things start breaking. A possible fix would be to instead of floating images in the center column, to assign them an align="left" and deal with the issues that creates (I've done that myself on a project).

This all stems from the fact that floated objects fall out of the document flow which means in essence that they are no longer contained by their container (which I think sucks ass).

[Lemmy]

You fix one thing and another pops up. What's your screen res? It looks like you're using a wide-screen plasma TV!

If it's the floating objects that are causing the breakup, the solution may at least be something I can understand.

[HC-Majick]

Of course I don't mind.. It's a default layout straight out of dreamweaver ....

Originally Posted by Lemmy

Majick was kind enough to share a design that works in both IE and FF. I'm sure he doesn't mind me passing it on. I'll check it out later.

[Preacher]

Originally Posted by Lemmy

You fix one thing and another pops up. What's your screen res? It looks like you're using a wide-screen plasma TV!

If it's the floating objects that are causing the breakup, the solution may at least be something I can understand.

You know what you may be able to do, though I haven't tried using both at once yet. You can set a minimum and maximum width on your outside container using this type of format (which works on all modern browsers)

PHP Code:

div {max-width: 675px; width:expression(document.body.clientWidth > 675? "675px": "auto" ); 


The min width would prevent your center column from breaking itself if someone narrows their browser window real small, and the max width would prevent your floats from breaking by not allowing the entire container to get to big.

Yeah, I know that res was a rediculous example, but if you were to have a post/entry in that middle section with just a few words or a picture any larger than it is now, it will start breaking sooner than that width I believe.

Ain't css fun?

[Lemmy]

Originally Posted by Preacher

Ain't css fun?

Yeah, I don't know how much more I can take.

Here's what I've decided to go with (until someone shows me what a bad idea it is): I've removed the max-width from the content div and set the main container to a fixed 900 px. I've also ditched the floating pics in the content. This (I hope) should make the page reasonably stable for most browser/screen configurations.

Thanks for the help!

[HC-Majick]

Lemmy,
Did you see that last pm?

[Lemmy]

Originally Posted by HC-Majick

Lemmy,
Did you see that last pm?

Yup, and replied.