[RD] Custom Table Needed!

[GREYtheFLAILER]

i.imgur.com/Ub29FhJ.png


Basically, I want an html table that looks similar to the one above. I've been fiddling with it for two days now, and can't seem to achieve anything where the spaces between all boxes are exactly the same. This will go above my forum and below my banner. I can always fix measurements (ignore the fact my drawing there is not proportioned correctly please), so that isn't too big of a deal. Also, if you could include bg colors for each table, that would be wonderful. Thanks!

[meghansarasan]

I built a table for you using relative and absolute positioning. I made it 1000 pixels wide with 10 pixel gaps between all boxes. I had no idea what colors you wanted, so I just used generic colors so you can easily tell one box from another. I tested this in firefox, IE, chrome, and opera, and it worked fine in those browsers. Let me know if this helps.

<style>

#posbox {
width: 1000px;
height: 430px;
position: relative;
text-align: center;
background: grey;
/* DO NOT CHANGE POSITION: RELATIVE */
/* DO NOT CHANGE TEXT-ALIGN: CENTER */
}

#posbox1 {
width: 200px;
height: 200px;
margin: 0px;
position: absolute;
top: 10px;
left: 10px;
background: green;
/* DO NOT CHANGE POSITION: ABSOLUTE */
}

#posbox2 {
width: 200px;
height: 200px;
margin: 0px;
position: absolute;
top: 220px;
left: 10px;
background: royalblue;
/* DO NOT CHANGE POSITION: ABSOLUTE */
}

#posbox3 {
width: 180px;
height: 410px;
position: absolute;
margin: 0px;
top: 10px;
left: 220px;
background: purple;
/* DO NOT CHANGE POSITION: ABSOLUTE */
}

#posbox4 {
width: 180px;
height: 410px;
position: absolute;
margin: 0px;
top: 10px;
left: 410px;
background: orange;
/* DO NOT CHANGE POSITION: ABSOLUTE */
}

#posbox5 {
width: 390px;
height: 410px;
position: absolute;
margin: 0px;
top: 10px;
left: 600px;
background: firebrick;
/* DO NOT CHANGE POSITION: ABSOLUTE */
}
#posbox1 p, #posbox2 p, #posbox3 p, #posbox4 p, #posbox5 p {
color: black;
padding: 10px;
text-align: left;
overflow-x: hidden;
overflow-y: auto;
}
</style>

<div id="posbox">
<div id="posbox1"><p>1
</div>
<div id="posbox2"><p>2
</div>
<div id="posbox3"><p>3
</div>
<div id="posbox4"><p>4
</div>
<div id="posbox5"><p>5
</div>
</div>

[GREYtheFLAILER]

You're my savior, thank you! Question though; I have a static-type sidetable on my site, so I need to have the table moved towards the left a good 50px or so. Should I just adjust the margins for that?

[meghansarasan]

Glad it works!

If you change the margin for the box itself, that should fix the problem. I centered it using margin: 0 auto because I assumed you wanted it centered. Since you don't want it centered on the page, just make the left margin 50px and feel free to remove the text-align: centered. That little bit is just a trick to make the centering work in IE.

[GREYtheFLAILER]

Thank you so much, that's perfect. If I have any trouble putting things inside, I'll let you know! Until then, all is good!

[meghansarasan]

Sounds good. I definitely recommend that when you start to edit anything INSIDE the boxes, you make the changes to the paragraph selector (the last bit of CSS in the style section) and not each box itself. You can break them down and edit them individually if each box needs to be different. This way you won't accidentally move things around where you don't want them.

I'm happy it worked out for you, layout wise! Enjoy. ^.^