"The Problem"

[AlexDS]

So recently I've been trying to make the jump from using tables in CSS to using divs, I've been searching as many tutorials as I could find on layouts and floating elements but have found the same problem for each one.

It seems you can't do as much with divs as with tables (for layout structure anyway), "The Problem" I have found is that on every CSS sites when you resize it either the template doesn't adjust at all (which is fine, that's the desired result from a fixed design) or for fluid designs the template will adjust but only to a certain point because after that the divs overlap each other.

I know that min-width could be applied as the solution but that isn't supported on IE6 and the point of CSS is to make websites more widely accessible in my opinion.

Is there a solution that I'm just not aware of?

[AlexDS]

Hmmm, just thought about it and I could use horizontal lists to do this... although that seems as bad as using tables. Any suggestions?

[karinne]

What is the problem exactly?!

[AlexDS]

Originally Posted by karinne

What is the problem exactly?!

Overlapping divs on fluid designs.

[MikeHopley]

Originally Posted by AlexDS;226119"

The Problem" I have found is that on every CSS sites when you resize it either the template doesn't adjust at all (which is fine, that's the desired result from a fixed design) or for fluid designs the template will adjust but only to a certain point because after that the divs overlap each other.

Is there a solution that I'm just not aware of?

Yes: elastic layouts, where the page layout is set in em (a relative font unit).

The page layout resizes with the font size. You can also use max-width for good browsers, and send IE6 the same value but as width instead. This lets the site squash down on lower resolutions.

For example: My in-progress site, using an elastic layout

[AlexDS]

Originally Posted by MikeHopley

Yes: elastic layouts, where the page layout is set in em (a relative font unit).

The page layout resizes with the font size. You can also use max-width for good browsers, and send IE6 the same value but as width instead. This lets the site squash down on lower resolutions.

For example: My in-progress site, using an elastic layout

Hmmm, that's almost the solution I was looking for apart from when I viewed your site in IE, your site seems to stay at the same size no matter what the resolution is. Is that happening because your site is still in progress or because it's a result of the elastic method?

I'm going to read up on elastic layouts some more though.

[MikeHopley]

Originally Posted by AlexDS

Hmmm, that's almost the solution I was looking for apart from when I viewed your site in IE, your site seems to stay at the same size no matter what the resolution is. Is that happening because your site is still in progress or because it's a result of the elastic method?

I'm going to read up on elastic layouts some more though.

There are two components of the elastic resizing, as used on my site:

• Whole layout scales up/down with font size (use of ems as layout unit)
• Layout compresses (squashes) when it runs up against the viewport boundaries (use of max-width)

The first feature works in all browsers, but the second does not work in IE6, because IE6 does not support max-width. (But it does work in IE7.)

The layout is not designed to fill up a high-resolution screen. It will simply sit centrally aligned, with lots of space on either side. But you can make it fill the screen by increasing the font size.