...
PDA

Splitting UL list into 2 columns!

montanaflynn
09-24-2007, 05:00 AM
Hello, I have a page i am creating and i need to have the list separate into two columns with aligned bullets and i am having trouble doing it in CSS!! Here is my code! The site can be seen at http://www.shipnatfreight.com/v2

* {

padding: 0;

margin: 0;

}



body {

background: #fff;

font: .74em "Trebuchet MS" Verdana, Arial, sans-serif;

line-height: 1.5em;

}

a {

color: #3B6EBF;

text-decoration: none;

}



a:hover {

text-decoration: underline;

}





#wrap {

margin: 20px auto;

width: 724px;

background: #fff url('images/midbg.jpg');

background-repeat: repeat-y;

}



#top {

background: #fff url('images/topbg.jpg');

height: 30px;

}



#content {

padding: 0 40px 0 40px;

}



#bottom {



background: #fff url('images/botbg.jpg');

height: 30px;

}





.header {

height: 100px;

background: #85ACF7 url('images/hidr.jpg');

}



.header h1 { padding-left: 17px; padding-top: 22px; font-size: 22px; color: #FFF; }

.header h1 a { font-size: 22px; color: #FFF; text-decoration: none;}

.header h2 { padding-left: 17px; padding-top: 0px; font-size: 17px; color: #FFF; }



.smalltext {

background: #F6F9FB;

border-bottom: 1px solid #E1E1E1;

padding: 5px;

}



.middle {

float: left;

width: 65%;

margin: 0 10px;

padding: 1% 1%;

text-align: justify;

}


.right {

float: left;

width: 24%;

margin: 0 10px;

padding: 1% 1%;



}



.right ul {

padding: 20px 0 15px 20px;

margin:0;

}


.right li {

margin-bottom:5px;

list-style-type: square;

color: #3B6EBF;

}


.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}

.right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}





#clear {

display: block;

clear: both;

width: 100%;

height:1px;

overflow:hidden;

}



#footer {

text-align: center;

color: #666;

}







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>National Freight - Quality Trasportation</TITLE>
<meta name="description" content="Delivering quality trasportation services including freight and auto shipping. We remain committed to giving our customers precisely what they want - "Great Rates and Superior Service.">
<meta name="keywords" content="auto transport service,auto transport,auto shippers,car shipping,car shipping company,automobile shipping quotes,auto shipping,car transport,nationwide shipping,car movers,car moving,recreational vehicles,nationwide movers,motorcycles,boats,new york,newark,elizabeth,port,LA,NY,OC,long beach,florida,cincinnati,michigan,california,arizona,boston,los angeles,indianapolis,washington,seattle,freight,shipping,trucking,freight services,ltl,freight shipping,truck load,freight quote,air shipping,freight rate,shipping services,international freight,shipping company,freight forwarding,shipping cost,freight carriers,parcel,air freight,shipping quote,freight company,shipping rate,trucking freight,transportation management,shipping freight,trucking company,overseas freight,cheap shipping,ltl freight,full load,freight broker,ltl shipping,freightquote,pallet,freight transportation,rail,freight forwarder,distribution,broker,courier,logistics,tl,trucker,tariff,air cargo,drop shipping,bill of lading,intermodal,expedited,forwarder,cartage,truckload,traffic management,motor freight,3pl,common carrier,lcl,drayage,truck broker,freight bill,air freight forwarder,breakbulk,cargo agent,ebay freight,oversized shipment" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</HEAD>

<body>

<div id="wrap">



<div id="top"></div>



<div id="content">



<div class="header">

<h1><a href="#">Ship National Freight</a></h1>

<h2>Toll Free: (866) 213-2244</h2>

</div>



<div class="smalltext">

<a href="">Do you have a car you need moved?</a>

</div>



<div class="middle">



<h2>National Auto Shipping</h2><BR>



Do you have to transport your car while you're moving your entire home? Shipping your auto can help ease the stress of moving and hiring a good auto transporter can make the process even easier.<BR><BR>

Whether you're moving or just bought a vehicle online, National Freight has what you need in a trusted auto transporter. We are your reliable source for your auto shipping needs. We are nationwide and offer door-to-door shipping. Your car will only be shipped with licensed, and insured drivers to help provide you with a positive experience in shipping your car.<BR><BR>
National Freight can ship your car anywhere in the United States. We strive to provide a service that is comparable to none. We remain committed to giving Great Rates and Superior Service.<BR><BR><img src="http://www.shipnatfreight.com/images/PressHereToGetQuote.gif" height="40" width="400" alt="Ship National Freight Quote" border="0">
<B><ul>

<li>Door-to-Door</li>
<li>Nationwide</li>

<li>Superior Service</li>
<li> Experienced </li>
<li> Insured </li>
<li>Licensed / Bonded</li>
<li>FREE Quotes</li>
<li>Competitive Prices</li>

</ul></b>
<B>Call (866) 213-2244 for a free vehicle transport quote on any auto shipping needs or just fill out the quote form on our website. Your satisfaction and positive experience are our first priority.</b>

<BR><BR>

<img src="http://www.shipnatfreight.com/images/film_1.gif" height="103" width="600" alt="ShipNatFreight.com - Auto Shipping" />



</div>



<div class="right">



<h2>Navigation</h2>



<ul>

<li><a href="http://www.shipnatfreight.com">Home</a></li>

<li><a href="http://www.shipnatfreight.com">About Us</a></li>
<li><a href="http://www.shipnatfreight.com">Services</a></li>
<li><a href="http://www.shipnatfreight.com">Quote</a></li>
<li><a href="http://www.shipnatfreight.com">Audit</a></li>
<li><a href="http://www.shipnatfreight.com">Payment</a></li>
<li><a href="http://www.shipnatfreight.com">Contact Us</a></li>

</ul>
<BR><B> • 25 Years of Experience<BR>
• Fully Licensed & Bonded<BR>
• License MC# 434230</B><BR><BR>

<img src="http://www.shipnatfreight.com/images/us_flag.gif"><BR><BR><img src="http://www.shipnatfreight.com/images/fmcsa.gif" height="50" width="75"><BR><BR></center>

</div>



<div id="clear"></div>



</div>



<div id="bottom"></div>



</div>



<div id="footer">

Design by <a href="http://www.edition.net">Edition.net</a>

</div>



</body>

</html>
jlhaslip
09-24-2007, 07:12 AM
Which list? There are several on the page.
montanaflynn
09-24-2007, 05:00 PM
oops, forgot to mention that the list im referring to. I would basically like to ad twice as many items but have them appear in the same row in two columns, like this.
*Door-to-Door *Door-to-Door
*Door-to-Door *Door-to-Door
*Door-to-Door *Door-to-Door
*Door-to-Door *Door-to-Door
<ul>
<li>Door-to-Door</li>
<li>Nationwide</li>
<li>Superior Service</li>
<li> Experienced </li>
<li> Insured </li>
<li>Licensed / Bonded</li>
<li>FREE Quotes</li>
<li>Competitive Prices</li>
</ul>
Jutlander
09-24-2007, 09:28 PM
Frank, have you looked at it in Firefox and IE 6? In FF, the second column goes down below the other but it is still over to the right. In IE 6, I get a horizontal scrollbar and a blue rectangle to the right of each column.
effpeetee
09-25-2007, 08:59 AM
Frank, have you looked at it in Firefox and IE 6? In FF, the second column goes down below the other but it is still over to the right. In IE 6, I get a horizontal scrollbar and a blue rectangle to the right of each column.

Thanks Jutlander.

It should be OK now.

Frank
ahallicks
09-25-2007, 11:21 AM
You could create two lists and float them side-by-side. Or you could set a width on your ul and display the li's inline so that only two would fit on one line. This would only work for li's that had a specific width though. I'd suggest creating two ul's that are floated next to each other.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum