Solved

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

Posted on 2008-10-30
3
231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

726 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