Getting columns in a <li>...

[RIRedinPA]

I'm trying to do a layout that has an <ul> with each list item having 3 columns. I have it working somewhat (the first <li> has the items in a column) but then the second <li> is not wrapping beneath the first. Where am I going wrong here?

 

HTML

 

<div class="groupShipAddressTable">
											<div class="groupShipAddressTableWrapper">
												<ul>

													<li class="nameColumn">
														<p>Name</p>
														<p>Type</p>
														<p>Edit</p>
													</li>

													<li class="addressColumn">
														<p>123 Street Street</p>
														<p>City, State Zip</p>
														<p>Country</p>
													</li>

													<li class="phoneColumn">
														<p>Day Phone</p>
														<p>610-555-5555</p>
														<p>Evening Phone</p>
														<p>610-555-5555</p>
													</li>

												</ul>

												<ul>
													<li 
														<p class="nameColumn">
															<p>Name</p>
															<p>Type</p>
															<p>Edit</p>
														</p>

														<p class="addressColumn">
															<p>123 Street Street</p>
															<p>City, State Zip</p>
															<p>Country</p>
														</p>

														<p class="phoneColumn">
															<p>Day Phone</p>
															<p>610-555-5555</p>
															<p>Evening Phone</p>
															<p>610-555-5555</p>
														</p>
													</li>
												</ul>
											</div>
										</div>

 

CSS

 

.groupShip .groupShipAddressBox .groupShipAddressTable 
				{
					background-color: #fff;
					border: 1px solid black;
					float: left; 
					height: 145px;
					margin-left: 20px;
					overflow-y: scroll;
					width: 650px;
				}

					.groupShip .groupShipAddressBox .groupShipAddressTable .groupShipAddressTableWrapper
					{
						width: 625px;
					}							

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

					}

						.groupShip .groupShipAddressBox .groupShipAddressTable .groupShipAddressTableWrapper ul li.nameColumn 
						{
							float: left; 
							margin-left: 10px;
							width: 120px;
						}

						.groupShip .groupShipAddressBox .groupShipAddressTable .groupShipAddressTableWrapper ul li.addressColumn 
						{
							float: left; 
							width: 145px;
						}

						.groupShip .groupShipAddressBox .groupShipAddressTable .groupShipAddressTableWrapper ul li.phoneColumn 
						{
							float: left;
							width: 300px;
						}

[n000bie]

You can add display:inline for the p tag or use span instead of p. Don't know how your layout should look like (it is so confusing).

 

You have used same style for LI (inside first ul) and P (inside second ul). I think it will be better to use table for this kind of data.