Stacking items within a grid...

[RIRedinPA]

I'm using ul/li to make a table/grid section of a site I am working on, the table has 3 columns, name, address, location, within each column information should be stacked, so for example column one would contain this items on a separate line:

 

joe user

(home)

edit

 

I keep getting it strung out on one line.

 

Here's my css

 

.groupShip .groupShipAddressBox
		{
			background: #f0f0f0 url(https://advanceweb.com/sharedresources/Graphics/crm_portal/bgDeductionDetails.jpg)  no-repeat center top;
		}

			.groupShip .groupShipAddressBox .header
			{
				clear: both;
				height: 20px;
				padding-top: 20px;

			}

				.groupShip .groupShipAddressBox .header p
				{
					float: left;
					font-weight: 800;
					line-height: 12px;
					text-transform:uppercase;
				}

				.groupShip .groupShipAddressBox .header .member
				{
					padding-left: 20px;
					*padding-left: 24px;
					width: 100px;
				}

				.groupShip .groupShipAddressBox .header .address
				{
					padding-left: 20px;
					*padding-left: 24px;
					width: 120px;
				}

				.groupShip .groupShipAddressBox .header .phone
				{
					padding-left: 20px;
					*padding-left: 24px;
					width: 120px;
				}

				/*************************************
			 	*	Group Ship Table
				************************************/
                                        .groupShip .groupShipAddressBox .groupShipAddressTable 
				{
					background-color: #fff;
					border: 1px solid black;
					height: 145px;
					overflow-y: scroll;
					width: 622px;
				}

				.groupShip .groupShipAddressBox .groupShipAddressTable li 
				{
					overflow: auto; 
					padding: 5px 0px 2px 5px;
				}

					.groupShip .groupShipAddressBox .groupShipAddressTable p
					{
						font-weight: 200;
					}

					.groupShip .groupShipAddressBox .groupShipAddressTable span.boldText
					{
						font-weight: 800;
						font-size: 1em;
					}


					.groupShip .groupShipAddressBox .groupShipAddressTable .nameColumn 
					{
						border: 1px solid red;
					}

						.groupShip .groupShipAddressBox .groupShipAddressTable .nameColumn p
						{
							width: 100px;
						}

 

and my html

 

<div class="groupShipAddressBox">
									<div class="header">
										<p class="member">Member</p>
										<p class="address">Address</p>
										<p class="phone">Phone Number</p>

										<div class="groupShipAddressTable">
											<ul>
												<li><p><span class="nameColumn"><p>Name</p><p>Location</p><p>Edit</p></span></p></li>
											</ul>
										</div>
									</div>
								</div>
							</div>

 

any help would be appreciated...

[dgoosens]

it is because of the float in this CSS property:

.groupShip .groupShipAddressBox .header p