Set up a column Count

[SpecTech]

ok basicly I was wondering if it is possible to manually set up a column count,

I have set up a list of section names by using a block and at the moment each name is going underneath the other one

is there a way to make it go three in a line so far this is my code

<actinic:block type="EntireSectionList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22Spalding%20Basketballs%22%20%2f%3e%20%3d%3d%20true" >

<a href="<actinic:variable name="SectionURL" />">
<Actinic:Variable Name="ProductName"/></a></div>
</font>


	</actinic:block>
</actinic:block>

it is duplicating the centre peice for each section using the variable Spalding Basketballs

however I want it to have 3 in one line maybe using a table but when it reaches 3 drop below itself and then do another row of 3

I have tryed to put a table around the entire block however this just made them all go on the same line

[leehack]

What's the errant closing </div> and <font> tag doing in there? get rid of them, that won't help. Wrap your code in a div, float it left and set its width to be a third of the space you have to play with. Should go 3 wide then, you could also style the anchor instead of doing this. You will need to grasp list layouts to get to grips with being able to set column counts etc. usually duplicating an existing one and then altering it your needs.

[SpecTech]

ok will do and them divs where in there because I stripped down the oringinal code so I could show the community, so I must of missed that div. but I am going to look at adding a div to float it, however because it duplicates the code for each section will that not make all the sections float left

[leehack]

If they all float left, they will all go 3 wide, like a 3 column table would set it up, but without the table.

[SpecTech]

ohhh I see I will give that a go

[SpecTech]

wow that worked perfectly, im not sure how you found that out but thanks!

[leehack]

LOL np, it's a pretty standard way of getting columns with CSS nowadays to be honest. Set a desired width, float it left and they all organise themselves like good little children.

[SpecTech]

one more thing because I dont have exactly 3 in a row the last 2 seem to drop one below the other then one right aligns and the other left aligns do you know why this might be?

[leehack]

Not a chuffing clue without seeing the code, probably a width versus alignment issue.

[SpecTech]

well this is the full peice of code that I am using there is alot of it as I have the add to cart showing on the outside of a section, however if you just look at the div at the top that is what im using to float it

<actinic:block type="EntireSectionList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22Spalding%20Basketballs%22%20%2f%3e%20%3d%3d%20true" >
<div style="float:left; padding-right:25px;">
<actinic:block type="ProductList" >
<br>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
      <form method="post" action="<actinic:variable name="OnlineScriptURL" value="Shopping Cart Script URL" />"> 
         <input type="hidden" name="SID" value="<Actinic:Variable Name="SectionID"/>" />
         <input type="hidden" name="PAGE" value="PRODUCT" />           
         <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
         <Actinic:SECTION BLOB='<Actinic:Variable Name="SectionCatFile"/>'/>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
            <!-- Hidden field when in trial mode -->
            <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
         </actinic:block>
</actinic:block>
<table<actinic:block if="%3cactinic%3avariable%20name%3d%22Show%20Section%20Alt%22%20%2f%3e%20%3d%3d%20true" >
onMouseover="ddrivetip('<actinic:variable name="SectionAlt" />', 100)";
onMouseout="hideddrivetip()"
</actinic:block> width="155" height="256" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="13" background="../section1.gif"></td>
  </tr>
    <tr>
    <td height="1" background="../section2.gif"><div align="center"><a href="<actinic:variable name="SectionURL" />"><img alt="<Actinic:Variable Name="ProductName"/>" src="<actinic:variable name="ProductImageFileName" />" border="0" width="130"/></a></div></td>
  </tr>
  <tr>
    <td align="center" height="1" background="../section2.gif" width="150">	
	<font color="#D56A00" size="2"><b>
	<div align="center">
<a href="<actinic:variable name="SectionURL" />">
<Actinic:Variable Name="ProductName"/></a></div>
</font>
	</td>
  </tr>
  <tr>
    <td height="1" background="../section2.gif">	<font color="#D56A00" size="2"><b><div align="center">
         <actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e">
				<Actinic:PRICES PROD_REF="<actinic:variable Name="ProductID" />" RETAIL_PRICE_PROMPT="<Actinic:Variable Name="ProductPriceDescription"/>">
            <actinic:variable name="PriceListRetail" />
            </Actinic:PRICES>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False">
	         <Actinic:NOTINB2B><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e">
            <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable Name="ProductID" />" COMPONENTID=-1><Actinic:Variable Name="RetailCustomerMessage"/></Actinic:PRICE_EXPLANATION>
         </actinic:block>
	</b></font><s></br>

<actinic:block if="%3cactinic%3avariable%20name%3d%22Product%20RRP%22%20%2f%3e%20%3e%200" >
		
<font color="#FF0000"> RRP: <actinic:variable name="Product RRP" selectable="false" /></s></br>
<actinic:block php="true" >
$rrp = <actinic:variable name="Product RRP" selectable="false" />;
$rawprice = <actinic:variable name="ProductPriceRaw" selectable="false" />;
{
$amountsaved = ($rrp - $rawprice);
$savepercent = ((($rrp - $rawprice) / $rrp) * 100);
echo "you save £$amountsaved";
}


</actinic:block>
</font>
	</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22Product%20RRP%22%20%2f%3e%20%3c%201" >
		</br>
	</actinic:block>
</div>
</td>
  </tr>
  <tr>
    <td height="1" background="../section2.gif"> <div align="center"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e%20%3d%3d%20FALSE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e%20%3d%3d%20FALSE%29" >  
		  <actinic:block if="%3cactinic%3avariable%20name%3d%22CartButtonVisibleToAllCustomers%22%20%2f%3e" >
		  <!-- This code is used when the quantity box is visible to all customers -->
		    <span style="visibility:hidden;" class="actrequired"><Actinic:Variable Name="QuantityPrompt"/></span>
		    <input type="hidden" name="Q_<actinic:variable Name="ProductID"/>" size="4" value="<Actinic:Variable Name="DefaultQuantity"/>" class="form_input_general" />
		  </actinic:block>		  <actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22">
			  <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e" >
				  <!-- This code is used when the quantity box is visible to retail customers, but not all other customer groups -->
				  <Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />">
				    <span class="actrequired"><Actinic:Variable Name="QuantityPrompt"/></span>
				    <input type="text" name="Q_<actinic:variable Name="ProductID"/>" size="4" value="<Actinic:Variable Name="DefaultQuantity"/>" class="form_input_general" />
				  </Actinic:ShowForPriceSchedule>
		      </actinic:block>		  <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" >		
				  <!-- This code is used when the quantity box needs to hidden from retail customers -->
				  <Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<span class='actrequired'><Actinic:Variable Name="QuantityPrompt"/></span>
				  <input type='text' name='Q_<actinic:variable Name="ProductID"/>' size='4' value='<Actinic:Variable Name="DefaultQuantity"/>' class='form_input_general' />
"></Actinic:ShowForPriceSchedule>
			  </actinic:block>
		  </actinic:block> 
		    </actinic:block>
    </div></td>
  </tr>
  <tr>
    <td height="1" background="../section2.gif">         <div align="center"><actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
              <actinic:variable name="AddToCartButton" />
      </actinic:block></div></td>
  </tr>
    <tr>
    <td height="20" background="../section3.gif"></td>
  </tr>
</table>
         <a name="<Actinic:Variable Name="EncodedProductAnchor"/>"></a>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
Ref: <actinic:variable name="ProductReference" />
         </actinic:block>
			<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e">
				<input type="hidden" name="Q_<actinic:variable Name="ProductID"/>"  value="<actinic:variable name="DefaultQuantity"/>" />
			</actinic:block>
         <actinic:variable name="CartError" />         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e">
            <a href="<Actinic:Variable Name="ProductLinkInfo"/>">
               <Actinic:Variable Name="ProductLinkText"/>
            </a>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e">
            <br />
            <span class="actrequired"><Actinic:Variable Name="OtherInfoPrompt"/></span><br />
            <input type="text" name="O_<actinic:variable Name="ProductID"/>" size="40" maxlength="1000" value="" />
         </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
      </form>
</actinic:block>
<br>
</actinic:block>
</div>
	</actinic:block>
</actinic:block>

[leehack]

I'm out at this stage i'm afraid, that's like looking back to the days of V7 with tables all over the place. Too complicated for me to look at as a favour, you really need to learn CSS, it would cut that lot down by at least 60%. Font tags are my cue to exit sorry, i'm fighting a losing battle when i see them.

[SpecTech]

ok but thanks anyway, I think the tables you are seeing are the section backgrounds if you look at the way I have done the sections here:
http://www.basketball-equipment-shop...sketballs.html

I have sat the hole thing in a table and then just set a background to the table, but I will probly go and set up a div for this.

[SpecTech]

to give everyone a better idea this is what it is doing, I think the problem is taht it is ending with only 2 products so it does not know where to grab the third, could I maybe add some code that would make it think there is a 3rd one there