[RESOLVED] Once More Into the Breech - Alignment ?

[BobH]

Evenin' All (G'day to You, Graeme),

Tunnel vision, fixation, frozen mind set, Alzheimers' - whatever it is - has come to visit again.

I have a page where I cannot get content in the rows of the 5 columns to align across the page. I've tried varying different CSS elements (margins, padding, width) and managed to shift the problem around to different columns but haven't been able to tie cause and effect together. The page behaves differently on Fx and IE, naturally. My approach to this page (defining a container then stuffing it with data from 5 separate files) derives from my lack of knowledge. There are probably many better ways to accomplish this simple directory but creating a database and populating it then displaying it on demand are skills I am yet to learn. As you can tell, my talents are already stretched tautly just trying to absorb a few basics.

Here's the page: www.broughton1960.com/Directory.php (http://www.broughton1960.com/Directory.php).

Here's the relevant bit of CSS:
#directory_container{
border: ridge #4F1286;
background-color: #FFF;
color: #000;
margin: 0 0 0 175px;
padding: 1px 1px 1px 1px;
width: 1020px;
height: 520px;
}

#directory_column_headings{
border: 1px solid #70009F;
padding: 0 2px 8px 4px;
width: 1010px;
height: 20px;
}

.name { width: 300px; }
.address { width: 335px; }
.city { width: 190px; }
.state { width: 39px; }
.zip { width: 110px; }

#directory_scroll_area{
overflow: auto;
margin: 0 1px 0 1px;
width: 1017px;
height: 485px;
line-height: 18px;
}

ul#directory_name{
list-style: none;
width: 300px;
}

ul#directory_address{
list-style: none;
width: 335px;
}

ul#directory_city{
list-style: none;
width: 190px;
}

ul#directory_state{
list-style: none;
width: 39px;
}

ul#directory_zip{
list-style: none;
margin: 0 0 0 3px;
width: 110px;
}

And, here's my humble plea for assistance yet again.

TIA
bh

[Sheldon]

You may want to look in to "float" and float: left; then you can drop that table and have a fluent CSS layout.

[BobH]

gave me 2 new ones.

Hi Sheldon,

Thanks for the response.

I've been googling and reading up on CSS float but don't seem to have mastered it yet. I removed the table - thanks for the advice. The column headings won't align on the same row with the statements I inserted. Any way to fix that?

Also, the final column starts at the end of the other rows. The first 4 columns are fine, but the ZIP code column won't cooperate. I fiddled around with width and clear statements, but didn't solve the riddle. Can you set me straight?

I attached a couple of ss. Both illustrate the column heading problem. Note that there is no ZIP code column in the first and, in the second, that the ZIP codes start after the last of the other 4 rows.

TIA
bh