7 replies [Last post]
Shark Daddy
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2003-05-25
Posts: 10
Points: 0

Aite... first post is a biggie I think...

I designed a web page (skeleton version attached) that uses tables for its layout, a no-no obviously. But it's no ordinary page, as it contains content that changes often in a series of four cells around a central one that rely on each other and colspan/rowspan to work.

Each 'box' has different content, and scales well (i.e. like a table) with the resizing of a window and/or different resolutions (I use 1152 x 864, but I try to allow as low as 800 x 600 to see the page). What I'd like to do is convert this to a div layout, but all my attempts have failed in producing the same scalability, positioning, and look through CSS. I also can't find a way to center the middle div. Note that the page often scrolls, so position: absolute for the bottom ones won't work. Can anyone give a hand, or show me source that would achieve the same results with CSS instead of tables? This ain't a simple task, and I'm downright stumped. Sad

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 19 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Some help here? Tables to CSS'ed divs

Hi, Shark Daddy,

It's great that you're making the effort to lay your page out with CSS instead of tables!

One approach to achieving your layout, without resorting to tables, is to enclose each block with a div, and arrange them using width and float settings.

The attached file shows the general approach, and seems to work fine under IE6 and Opera 7 (WinXP), but is a bit less than optimal in Netscape 7, and so needs some work there. Hopefully it's something for you to start with, however - let us all know how you go with this!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Some help here? Tables to CSS'ed divs

Netscape seems to need a little extra space when floating.

If you play around with the widths of the of sections 2, 3and 4 in Svens example, set them to about 30%., you should have something to start with.

You can then tweek it as you like.

Anonymous
Anonymous's picture
Guru

Some help here? Tables to CSS'ed divs

That's a good start, thanks a lot, while I'm coming up to a few of the same problems I had when I tried to position them, the way you have your floats set up is superior to mine. The big issue stil remains though; is there any way that I can get the two vertical divs on the sides to always meet the other two (i.e. make the whole thing a rectangle always)? As tables, they would stretch to fit if say, the left one was twice as long as the right one (the middle box would stretch too; it's best if you try it out to see what I mean). This still remains the major issue with this.

The reason Mozilla is displaying the second box out of place looks to be because of the padding set (removing the div padding solves it) or because it's calculating the percentage width before it puts in a scrollbar, a huge no-no for a browser. For some reason it is adding space and there are longer lines of text. This may be a bug, and I'll look at it and file it myself if so.

Shark Daddy
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2003-05-25
Posts: 10
Points: 0

Some help here? Tables to CSS'ed divs

Smooth. Forgot to log in there. :?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Another attempt

Here's another attempt, I added a doctype, which makes the rendering IE and Netscape closer.
Also added a containing div, changed the float positions, widths, order in the markup and set the margin to 0.

Ok, you got me I played around so much I don't really know what I did Smile

It's still far from perfect just another version to try out.

Shark Daddy
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2003-05-25
Posts: 10
Points: 0

Some help here? Tables to CSS'ed divs

Thanks for your help again... it's good, but just not the same as the table layout; I don't think I can get it to work, because the tall side divs are too short when there's too little text and don't meet the block below them. Ths can be done, but I think only with javascript or something like that, which I'm not prepared to do. I think all CSS/markup methods have been exhausted... :?

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 19 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

Some help here? Tables to CSS'ed divs

I have to agree - the CSS layouts we've discussed are just not as robust as the table layout, in terms of maintaining that visual arrangement.

Of course, the CSS purist would argue here that it could be more important to keep the logical structure of the document pure, and to suffer the limitations that might bring to layout...