have content go to next column

[rmcguire80]

Hello, on my page at

http://www.meadowlarkco.com/salestemplate.html

how can I make it so that where I have the section, "some customers that we currently serve are:" to have where it starts Mann Lake to go to the next column so I have two columns of customers listed rather than one long list.

thanks

 

[ChrisHirst]

CSS3 Multiple Columns


Or

Server-side

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[spamjim]

As you are using a table based layout, you might just insert a 2 column, 1 row table and manually break the list into the two cells.

 

[darryncooke]

is this dynamically being generated or static? on the front end you would need jquery for this and there is a great plug in called columnizer

http://welcome.totheinter.net/columnizer-jquery-plugin/

which I have used if you want cross browser compatibility.

On the back end you would need to create the snippet of code that would output the correct HTML as you would want it.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[datamasher]

Hi,
a simple solution is to split the list into two separate lists. Use the code below.

<ul style="float: left;"><li><font size="2" face="Arial, Helvetica, sans-

serif">Halliburton</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Komatsu</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Compass Minerals</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Commercial Metals Company</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Hanson Pipe and Precast</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Union Pacific Railroad</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Johnson Controls</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Cooper Tire</font></li>
</ul>
<ul style="float: left;">
<li><font size="2" face="Arial, Helvetica, sans-serif">Mann Lake</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">New Winn Cup</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Monsanto</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Aspen Distributing</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Highland Foods</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Ifsco Systems</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Schauenburg</font></li>
                                        </ul>

Hope this helps

Steve

 

[rmcguire80]

thanks everyone for the help.....I believe the 2 separate lists should work

thanks

 

[rmcguire80]

ok, I've added what datamasher suggested and it appears fine at

http://www.meadowlarkco.com/salestemplate.html

but when I embed it within and outlook message as an HTML email the second UL isn't showing next to the first, its showing on the next line

 

[spamjim]

Datamasher did well with the suggestion of two lists but you're heading down a messy path by including those font sizes and faces there and nowhere else. The two column list does not match the text below it. You should sort out how you want to use style sheets. It may not be ideal to have text defined both in the style sheet and inline. Find a single method. As this appears to be destined for HTML mail, you may need to determine what aspects of your CSS render properly in mail programs.

 

[darryncooke]

also since you are making an email build this in tables and remove floats. your issue is a bit more complicated and involved since the original question was posed. Either way I would revisit the drawing board and build out the proper strategy for development and deployment.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[rmcguire80]

for time constraints could I put both lists in tables then align them somehow so it does appear correctly in an HTML email?

 

[spamjim]

Someone might have previously mentioned that as a viable option.

 

[rmcguire80]

how then do I get the second table to appear next to the first I have it as

<table>
<tr>
<td>

//second table
<table>
<tr>
<td>
</td>
</tr>
</table>

</td>
</tr>
</table>

 

[datamasher]

Hi,
replace the table with the one below. This works in outlook express.

                                    <table border="0" cellpadding="20" cellspacing="0" width="100%">
                                    <tr mc:repeatable>
                                    	
<td align="left" width="50%">

<p><strong><font size="3" face="Arial, Helvetica, sans-serif">Some Customers that we currently serve 

are:</font></strong></p>
                                        <ul>
<li><font size="2" face="Arial, Helvetica, sans-serif">Halliburton</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Komatsu</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Compass Minerals</font></li>

										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Commercial Metals Company</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Hanson Pipe and Precast</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Union Pacific Railroad</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Johnson Controls</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Cooper Tire</font></li>
										</ul>

</td>

<td align="left" width="50%">

<p>&nbsp;</p>										

<ul>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Mann Lake</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">New Winn Cup</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Monsanto</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Aspen Distributing</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Highland Foods</font></li>

										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Ifsco Systems</font></li>
										<li><font size="2" face="Arial, Helvetica, 

sans-serif">Schauenburg</font></li>
                                        </ul> 

                                        </td>
                                        
                                    </tr>
                                    </table>

Hope this helps

Steve

 

[datamasher]

Hi again,
forgot to mention, the <p>&nbsp;</p> in the second column of the table puts in a blank line to line up the two lists. They lists were not level because you had a line of text i.e "Some of the customers we currently serve are : " above the 1st list on the left which pushes it down 1 line.

Steve

 

[datamasher]

Hi,
oops!!! sorry getting tired. In the second column containing the second list I missed out the &nbsp; between the <p> and the </p>

Steve

 

[spamjim]

There is some monkey poo in that HTML that is not necessary unless you are using MailChimp.

<P> vertical alignment tricks are not necessary and may actually fail if the text header in the first column wraps oddly. It is safer to let the header text flow across both columns.

<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td colspan="2" align="left"><strong><font size="3" face="Arial, Helvetica, sans-serif">Some Customers that we currently serve are:</font></strong></td>
</tr>
<tr>
<td align="left" valign="top" width="50%">
<ul>
<li><font size="2" face="Arial, Helvetica, sans-serif">Halliburton</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Komatsu</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Compass Minerals</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Commercial Metals Company</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Hanson Pipe and Precast</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Union Pacific Railroad</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Johnson Controls</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Cooper Tire</font></li>
</ul>
</td>

<td align="left" valign="top" width="50%">
<ul>
<li><font size="2" face="Arial, Helvetica, sans-serif">Mann Lake</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">New Winn Cup</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Monsanto</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Aspen Distributing</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Highland Foods</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Ifsco Systems</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">Schauenburg</font></li>
</ul> 
</td>
</tr>
</table>

 

[spamjim]

Ah... I just read the rest of your HTML to realize that you are using MailChimp.

 

[datamasher]

spamjim,
thanks for actually getting to what I was aiming at, forgot about "colspan". Haven't used tables for years.

Steve