Shoutbox

quote:

---

Originally posted by Chris Boulton

quote:

---

Originally posted by Sunshine
Why don't you use tables instead of DIVs?

Tables are easy, you can set the width to a percentage of the totall width of the table....

Let's say you want 3 columns...then the widths would be 33%, 34% and 33%......4 columns is even easier...simple 25%

---

The reason people tend to move away from that is because of the fact that tables are designed to contain tabular data and fboth accessibility and usability issues (especially with screen readers) they're not liked for laying out a page. It come under semantics.

Like I said though, tables are the easiest way for you to do something like this and not have to worry about how it is going to appear in 10+ different browsers and browser versions.

You can also "set the width to a percentage of the total width" using a DIV approach however you still have to worry about getting floating and positioning correct in different browsers.

---

All very true but seeing as welshboy222 doesn't seem that skilled yet i think he might want to take the easy approach. All depends somewhat on if he wishes to make every page use 3 columns (in wich case DIVs would be the ultimate way to go) or just one or two...

I've tried the DIV thing myself once but gave up due to the fact that i couldn't get it to center (horizontaly) in whatever screen resolution used (that's where i got stuck..lol)....not like i need all pages in 3 columns anyway myself.

I.o.w. as you already said: working with DIV's like that is a pain if you want cross browser compatibility...certainly not beginner material.

quote:

---

Originally posted by Sunshine
I've tried the DIV thing myself once but gave up due to the fact that i couldn't get it to center (horizontaly) in whatever screen resolution used (that's where i got stuck..lol)....not like i need all pages in 3 columns anyway myself.

---

<div style="position:absolute; left: 0px; top:0px; width:33%;"></div>
<div style="position:absolute; left: 33%; top:0px; width:34%;"></div>
<div style="position:absolute; left: 67%; top:0px; width:33%;"></div>

That code will help me too

quote:

---

Originally posted by ShawnZ

quote:

---

Originally posted by Sunshine
I've tried the DIV thing myself once but gave up due to the fact that i couldn't get it to center (horizontaly) in whatever screen resolution used (that's where i got stuck..lol)....not like i need all pages in 3 columns anyway myself.

---

<div style="position:absolute; left: 0px; top:0px; width:33%;"></div>
<div style="position:absolute; left: 33%; top:0px; width:34%;"></div>
<div style="position:absolute; left: 67%; top:0px; width:33%;"></div>

---

Thanks

I might have a fiddle about with that when i feel like experimenting again.

---

Edit:

quote:

---

Originally posted by hmaster
Sunshine, the best way for centering is to tweak it like this:
http://bluerobot.com/web/css/center1.html

This way to do 2 columns is good as it makes all the columns the same height regardless of each seperate height:
http://www.cssplay.co.uk/layouts/3cols2.html

---

Thanks, that indeed does look good. Very useful not just for me but for all who strugle with this...

Sunshine, the best way for centering is to tweak it like this:
http://bluerobot.com/web/css/center1.html

This way to do 2 columns is good as it makes all the columns the same height regardless of each seperate height:
http://www.cssplay.co.uk/layouts/3cols2.html