Solved

How doI use DIV tags to set the width of a cell?

Posted on 2008-10-30
3
211 Views
Last Modified: 2012-05-05
http://www.glowfishtw.com/benzleporcelain/products2.asp


I'm trying to get the image/text holding cells in the above page to remain at a fixed width (252px) and force the text to wrap down to the next line instead of expanding horizontally. I was given this advice:

"With css You can solve this easily by using floating divs with a fixed width, and it's much cleaner and faster coding."

but am not quite sure how to code this. Below is the code for my table. Could someone show me how to constrain the cells using DIV tags? You don't have to mess with the whole code, just maybe the first cell so I get the idea. Thanks, I understand it a lot better if I can see it.

<table width="100%" border="0" align="center">
          <tr>
             
            <td>&nbsp;</td>
                  
            <td><div align="center">
            <% If Not rsproducts.EOF Then %>
                  <span class="leftlinks"><strong><%=(rsproducts.Fields.Item("product").Value)%></strong></span><br />
                <span class="style4"><%=(rsproducts.Fields.Item("price").Value)%></span>
                        <br />
              <br />
                  <%=ReturnImage(rsproducts("imageURL"),rsproducts("imageURL"))%><br />
            <br />
            <span class="style4"><%=(rsproducts.Fields.Item("pdescription").Value)%></span></div>
<% rsproducts.MoveNext() %>
            <%End if%>
                  </td>
                  
            <td>&nbsp;</td>
                  
            <td><div align="center">
            <% If Not rsproducts.EOF Then %>      
                  <span class="leftlinks"><strong><%=(rsproducts.Fields.Item("product").Value)%></strong></span><br />
                <span class="style4"><%=(rsproducts.Fields.Item("price").Value)%></span>
                        <br />
              <br />
                  <%=ReturnImage(rsproducts("imageURL"),rsproducts("ImageURL"))%><br />
            <br />
            <span class="style4"><%=(rsproducts.Fields.Item("pdescription").Value)%></span></div>
<% rsproducts.MoveNext() %>
                  <%End if%>
                  </td>
                  
            <td>&nbsp;</td>
                  
            <td><div align="center">
            <% If Not rsproducts.EOF Then %>      
                  <span class="leftlinks"><strong><%=(rsproducts.Fields.Item("product").Value)%></strong></span><br />
                <span class="style4"><%=(rsproducts.Fields.Item("price").Value)%></span>            
                        <br />
              <br />
                  <%=ReturnImage(rsproducts("imageURL"),rsproducts("ImageURL"))%><br />
            <br />
            <span class="style4"><%=(rsproducts.Fields.Item("pdescription").Value)%></span></div>
<% rsproducts.MoveNext() %>
                  <%End if%>
                  </td>
                  
            <td>&nbsp;</td>
                  
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
            </table>

0
Comment
Question by:elliottbenzle
  • 3
3 Comments
 
LVL 2

Expert Comment

by:quetzal22
ID: 22847256
instead of just having:
<div align="center">

add a style attribute:
<div align="center" style="width:252px;">
0
 
LVL 2

Accepted Solution

by:
quetzal22 earned 500 total points
ID: 22847271
actually, ignore my previous post. Use the css and code posted below:
CSS:

<style type="text/css">

<!--

.style1 {color: #FFFFFF}

.style3 {

	color: #FFFFFF;

	font-size: 24px;

	font-weight: bold;

}

.style4 {

	font-size: 12px;

	color: #666666;

}

.description{display:block;width:52px;}

-->

</style>
 
 

Updated code:

<table width="100%" border="0" align="center">

          <tr>

             

            <td>&nbsp;</td>

                  

            <td><div align="center">

            <% If Not rsproducts.EOF Then %>

                  <span class="leftlinks"><strong><%=(rsproducts.Fields.Item("product").Value)%></strong></span><br />

                <span class="style4"><%=(rsproducts.Fields.Item("price").Value)%></span>

                        <br />

              <br />

                  <%=ReturnImage(rsproducts("imageURL"),rsproducts("imageURL"))%><br />

            <br />

            <span class="style4 description"><%=(rsproducts.Fields.Item("pdescription").Value)%></span></div>

<% rsproducts.MoveNext() %>

            <%End if%>

                  </td>

                  

            <td>&nbsp;</td>

                  

            <td><div align="center">

            <% If Not rsproducts.EOF Then %>      

                  <span class="leftlinks"><strong><%=(rsproducts.Fields.Item("product").Value)%></strong></span><br />

                <span class="style4"><%=(rsproducts.Fields.Item("price").Value)%></span>

                        <br />

              <br />

                  <%=ReturnImage(rsproducts("imageURL"),rsproducts("ImageURL"))%><br />

            <br />

            <span class="style4 description"><%=(rsproducts.Fields.Item("pdescription").Value)%></span></div>

<% rsproducts.MoveNext() %>

                  <%End if%>

                  </td>

                  

            <td>&nbsp;</td>

                  

            <td><div align="center">

            <% If Not rsproducts.EOF Then %>      

                  <span class="leftlinks"><strong><%=(rsproducts.Fields.Item("product").Value)%></strong></span><br />

                <span class="style4"><%=(rsproducts.Fields.Item("price").Value)%></span>            

                        <br />

              <br />

                  <%=ReturnImage(rsproducts("imageURL"),rsproducts("ImageURL"))%><br />

            <br />

            <span class="style4 description"><%=(rsproducts.Fields.Item("pdescription").Value)%></span></div>

<% rsproducts.MoveNext() %>

                  <%End if%>

                  </td>

                  

            <td>&nbsp;</td>

                  

          </tr>

          <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

            </table>

Open in new window

0
 
LVL 2

Expert Comment

by:quetzal22
ID: 22847280
make sure you specify 252px. I forgot to change 52px:
.description{display:block;width:52px;}


to 252px:
.description{display:block;width:252px;}
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now