How do I align 6 boxes vertically?

Forum Moderators: open

Message Too Old, No Replies

How do I align 6 boxes vertically?

tried but doesnt work

JasonJJT

4:47 pm on Sep 23, 2003 (gmt 0)

Hi, I am having trouble aligning 6 boxes (tables) I have made. I want them all to be below each other in one vertical column. But when I try to make a table for it, it just doesnt work. They still just appear next to each other. Could you please give the code I would need for 6 boxes? Thank you very much.
For Ex:

Box1
Box2
Box3
Box4
Box5
Box6

korkus2000

5:31 pm on Sep 23, 2003 (gmt 0)

Try this:

I am guessing that you were not making new rows and only new columns?

defanjos

6:15 pm on Sep 23, 2003 (gmt 0)

If you really need to use separate tables, make sure not to include "align=left" or "align=right"

will work:

will not work:

JasonJJT

5:03 am on Sep 26, 2003 (gmt 0)

Here, maybe looking at the website where I have the blocks made will help. What I want to do is put all the boxes one below the other in one single vertical column. I have already tried to arrange them like this by using a table, which for some strange reason only got the first 2 boxes the way I want them, and the others didnt work. Please help.
Thank you
<sorry, no URLs to personal sites>

[edited by: tedster at 7:07 am (utc) on Sep. 26, 2003]

kwasher

5:28 am on Sep 26, 2003 (gmt 0)

- OOOOOOOO. I love puzzles! Is there a prize?

I want to claim the prize! Look here-

URL REMOVED AS PER BILLS SUGGESTION (though I see plenty of links here, as long as they're not promotional)

I commented out the mistakes so you could see them.

-Kenn

[edited by: kwasher at 7:03 am (utc) on Sep. 26, 2003]

Staffa

5:48 am on Sep 26, 2003 (gmt 0)

Before trying any more changes you should run your page in a validator
too many things are not right that changing tables only will not help solve the problem.

Also setting each table to a fixed width of 140 px gives 6 x 140 = 840
on an 800 screen one table will go to the next line.
Better to set the width in percentage.

kwasher

5:55 am on Sep 26, 2003 (gmt 0)

Also setting each table to a fixed width of 140 px gives 6 x 140 = 840

Not if each table is under the other.

p.s. I kind like the way they look going ACROSS better than down. But thats me.

JasonJJT

6:06 am on Sep 26, 2003 (gmt 0)

You are great! Thank you so much!
Now how could I get even spaces such as a paragraph break between each box?
What the final effect will be adding this total code to the headers on my message board, so all boxes will be floating on the left side of all pages on my message board.

Thanks again!

kwasher

6:13 am on Sep 26, 2003 (gmt 0)

No problem. It was fun. Especially when I messed it up the first time (My html editor removes all the spaces upon upload).

Next part...

If I understand correctly, then simply add a <br> or <p></p>
inbetween each table end and new table beginning... like so

<table>
<td>
<tr>
content here
</td>
</tr>
</table>

<table>
<tr>
<td>
content here
</td>
</tr>
</table>

Or put each table in a paragraph

<p>
<table>
<tr>
<td>
content here
</td>
</tr>
</table>
</p>

Im off to bed! Good luck!

JasonJJT

6:19 am on Sep 26, 2003 (gmt 0)

Thank you for the immediate reply!
And one more question...what part of the code do I change so that this problem doesnt happen.

When I plugged in the code I have with the working vertical column of boxes into the headers for my message board, I got the boxes lined up fine, but instead of appearing next to the message board content, it appeared on the left as it should, but pushed the message board content down so the message board content doesnt start until the boxes are all done. I want the boxes to be lined up next to my message board content. How is this done?
Thank you very much once again.

kwasher

6:49 am on Sep 26, 2003 (gmt 0)

Believe it or not... im still here... cant stop reading... ha hah ha

This could be tricky or easy. Create a brand new page so you dont mess up any others in the meantime.

On the new page, put this between the body tags:

<table border="0" width="100%">
<tr>
<td valign=top>BOXES HERE</td>
<td valign=top>MESSAGE BOARD HERE</td>
</tr>
</table>

Copy all the code from the boxes between
<body>

</body>

and put it in the new page where it says BOXES HERE.

Now copy all the code for the message board between
<body>

</body>

and put that where it says MESSAGE BOARD HERE.

Save the new page with a new name like test.html, then look and see if its ok.

If it is, rename the old message board file (so you can always get it back if you need to) something like messageboardfile20030925.html.

Then resave the test.html file as the filename you want to actually use.

Good luck!

Im really really going to bed now... its almost time to wake up ha ha ha ha!

bill

6:54 am on Sep 26, 2003 (gmt 0)

You guys had better remove those URLs from your posts...that's frowned upon here

Why not lose the tables and go with a much simpler CSS/<div> layout something like this:

<style>.box {width: 140px;}</style>

...

<div class="box"><p>Content here #1</p></div>
<div class="box"><p>Content here #2</p></div>
<div class="box"><p>Content here #3</p></div>
<div class="box"><p>Content here #4</p></div>
<div class="box"><p>Content here #5</p></div>
<div class="box"><p>Content here #6</p></div>

kwasher

7:05 am on Sep 26, 2003 (gmt 0)

I think because its many tables within tables.