Shoutbox

Ok i have tried a couple of methods to code the following design;

http://img.habboupload.com/1234340744.png

Tables, CSS/Divs.

How would you guys suggest i code it, because i can do it all in tables quite easily, except managing to get the left and right content area's backgrounds continueing down without stuffing up. Usually if i have different content areas with different heights i use multiple different tables so that it doesnt drag another table down. I dont think that makes sense but any suggestions, if you want to see the very ugly looking code at the moment then let me know.

how about use both?

tables for the main outline (top, left, mid, right) then divs for everything else... and by tables i mean like this:

xml code:

---

<table>
<tr>
<td colspan="3">Header</td>
</tr>
<tr>
<td>Left</td>
<td>mid</td>
<td>right</td>
</tr>
</table>

---

Yeah ive considered that, but if the content in one of the <td>'s is bigger than the others it moves them to the centre of the table.

thats why with the <tr> you make it <tr valign="top">

simple! =p

I'd just use divs, but that's becuase i'm scared of tables.

One container div;
- 3 column divs to split page up with defined widths
  - in the left 3 divs to create the three boxes
  - in the centre 2 divs for the nav bar (?) and content
  - 1 div on the right for that image

That's how I'd do it anyway, but be careful with divs and browser cross-compatibility, IE treats div padding differently to firefox, just google it for a couple of solutions.

http://gifpaste.org/eddie/

That's just to demonstrate a 3-column layout. It takes very little CSS and even less HTML to make it work. I tested it in Firefox, Chrome, IE (7, 8), and Opera.

Right now it's fixed-width at 800px, but it only takes a tiny change to make it fluid with the center column expanding as the page does (simply make the width a percentage, or remove it altogether and use the margin to center it.. whatever you want).

The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.

quote:

---

Originally posted by segosa
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.

---

you need to make the body text-align: center; then the content text-align: left;

quote:

---

Originally posted by NanaFreak

quote:

---

Originally posted by segosa
The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.

---

you need to make the body text-align: center; then the content text-align: left;

---

Up to now I've always been able to center divs in IE using the fixed-width auto margin method without a problem, and I've never had to resort to that text-align hack. Either way, fixed it using that.

Edit: It now works in IE 5.5, 6, 7 & 8.

quote:

---

Originally posted by segosa
http://gifpaste.org/eddie/

That's just to demonstrate a 3-column layout. It takes very little CSS and even less HTML to make it work. I tested it in Firefox, Chrome, IE (7, 8), and Opera.

Right now it's fixed-width at 800px, but it only takes a tiny change to make it fluid with the center column expanding as the page does (simply make the width a percentage, or remove it altogether and use the margin to center it.. whatever you want).

The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.

---

Cheers mate, greatly appreciated Thanks for the help.

quote:

---

Originally posted by segosa
http://gifpaste.org/eddie/

That's just to demonstrate a 3-column layout. It takes very little CSS and even less HTML to make it work. I tested it in Firefox, Chrome, IE (7, 8), and Opera.

Right now it's fixed-width at 800px, but it only takes a tiny change to make it fluid with the center column expanding as the page does (simply make the width a percentage, or remove it altogether and use the margin to center it.. whatever you want).

The only issue is it doesn't seem to center correctly in IE7 (that's IE for you), and I'm not in the mood to look into why right now.

---

The site linked is displayed differently within IE, due to the difference in the way IE renders padding, resulting in the div's with padding appearing smaller than for example, when loaded in firefox. Not too much of a problem with this particular design, but still a thing to note as a potential future problem when developing designs.