Div inside table problem

Div causing table cell to stretch in height

[CssLearner]

Hi,

I am having problems while placing divs inside the table. The exact problem I am facing is, when contents inside my "WebshopProductText"
div are bigger in length then, the "WebshopProductText" div is displayed below the "productimage" div which is having image, causing the td/cell to strech in height.
But the behaviour I want is, two divs should be displayed in same line in horizontal position.

This problem is only for IE and not for FireFox.

My code looks like as follows:

<table class="listtable">
<tr>
<td class="name">
<div id="WebshopProduct" class="icon">
<div id="productimage" class="listcellicon">
<img class="dragimagesmall" alt="" src="image url"/>
</div>
<div id="WebshopProductText" class="dragtextdivsmall" style="white-space: nowrap;">
Test Contents of Div
</div>
</div>
</td>
</tr>
<table>

CSS is:

.listtable
{
background-color:#FFFFFF;
color:#2D5985;
font-size:11px;
font-weight:normal;
width:100%;
}

.icon
{
background-color:#FFFFFF;
border:1px dotted #FFFFFF;
color:#000000;
float:left;
font-size:11px;
height:100%;
margin:0px;
overflow:hidden;
text-align:left;
width:100%;
z-index:0;
}

.dragtextdivsmall
{
background-color:transparent;
height:18px;
overflow:hidden;
text-align:left;
}

I've to use the structure like table and inside that div. Because if I remove table then my other code will not work.
Can anyone help me on this?

Thanks in advance.

[Marshall]

Hello CssLearner and welcome to WebmasterWorld.

Are you bascially looking to have the image on the left and the text on the right?

Marshall

[CssLearner]

Thanks for the welcome.

Yes I want image on the left side. And the text on the right side.
Basically I want to print the row which displays the all the products I've in database.
Means the structure I want is like on each row I want to print the following from databse.

product Icon ProductName

[Marshall]

While I would not recommend this as proper, placing <div> in <td> with the outcome you want, you will need to float both <div>. And not knowing the specifics of class="listcellicon", I am going to eliminate it for th epurpose of this example.

#productimage {
height: height of imagepx; /* only if the image height is constant otherwise, not needed*/
width: width of imagepx; /* only if the image width is constant otherwise, not needed */
float: left;
}

.dragtextdivsmall
{
background-color:transparent;
height:18px;
overflow:hidden;
text-align:left;
float: left; /* you could also do float:right; instead */
margin-left: 5px; /* only needed to space text from image */
}

HTML

<table class="listtable">
<tr>
<td class="name">
<div id="WebshopProduct" class="icon">
<div id="productimage">
<img class="dragimagesmall" alt="" src="image url"/>
</div>
<div id="WebshopProductText" class="dragtextdivsmall" style="white-space: nowrap;">
Test Contents of Div
</div>
<br style="clear:both">
</div>
</td>
</tr>
<table>

This should do the trick, but to repeat myself, this is not a good practice.

Marshall

[CssLearner]

Hi

Thanks for the code. I tried it but not working for me. Showing the same problem as before.

[Marshall]

If your page is live, can you SM me the url?

Marshall

[CssLearner]

My page is not on live server currently..

But I can give you more details on this,
1. My table is not fixed. It is getting generated dynamically through code.
2. I've given just one sample case. But in real situation,my table will not have only product icon and product name as columns. I want to print all the columns from databse to my table.
3. This problem mainly occurs when I print 6 to seven columns in my table.
4. Product Name div does not drop down in all situations. It comes down of the image div only when my product name is longer in length.

So the rough layout of my page which is generating dynamically is like:

<table class="listtable">
<tr>
<td class="name">
<div id="WebshopProduct" class="icon">
<div id="productimage" class="listcellicon">
<img class="dragimagesmall" alt="" src="product icon url"/>
</div>
<div id="WebshopProductText" class="dragtextdivsmall" style="white-space: nowrap;">
Product Name
</div>
</div>
</td>

<td>Product Number</td>
<td>Product Price</td>
<td>Product VAT</td>
<td>Product Description</td>
<td>Create Date</td>
<td>Create Time</td>
</tr>
<tr>
....
</tr>
<tr>
....
</tr>
<table>

[CssLearner]

Sorry...One main thing I forgot to mention is,
my table i.e. the main table having class as listtable is placed in side one div. This div has css as,

.MainDiv {
height:366px;
width:537px;
}