CODEWITHSUNDEEP
htmlhtml-table
complexi
complexi

Reputation: 427

Child table overlapping parent div

Using ckeditor users can add a description to their listing. Some descriptions have a table width wider than the containing div. How do we force the description to fit inside the containing div?

<div style="float:left; padding-top: 4px; font-size:13px; width:500px; border-style:solid;">                    
<table border="1" cellpadding="0" cellspacing="0" style="width:576px; height: 120px;">          
  <tr height="39">          
    <td height="39">                
      <p>                   
        <span style="font-size:16px;">
          <span style="color: rgb(255, 140, 0);">APPLE FACTORY RECERTIFIED IPAD/1ST-GENERATION TABLET APPLE:
          </span>
        </span>
      </p>              
      <p>                   &nbsp;
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">A4/A4X1-1.00G 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">256MB/1-DIMM 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">16GB/FLASH 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">802.11A/B/G/N+BT INTEGRATED-GRAPHICS/0MB 9.7WXGA-
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">TOUCHSCREEN/MULTI-TOUCH APPLE/IOS-4.0 1.5LBS 1YR
          </span>
        </span>
      </p>          </td>       
  </tr>
</table>
<p> &nbsp;
</p>                       
</span>            
</div>

Upvotes: 1

Views: 4288

Answers (2)

Giannis
Giannis

Reputation: 813

You can also add the overflow: hidden; attribute in your first div styling like this:

<div style="float:left; padding-top: 4px; font-size:13px; width:500px; border-style:solid; overflow: hidden;">                    
<table border="1" cellpadding="0" cellspacing="0" style="width:576px; height: 120px;">          
  <tr height="39">          
    <td height="39">                
      <p>                   
        <span style="font-size:16px;">
          <span style="color: rgb(255, 140, 0);">APPLE FACTORY RECERTIFIED IPAD/1ST-GENERATION TABLET APPLE:
          </span>
        </span>
      </p>              
      <p>                   &nbsp;
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">A4/A4X1-1.00G 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">256MB/1-DIMM 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">16GB/FLASH 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">802.11A/B/G/N+BT INTEGRATED-GRAPHICS/0MB 9.7WXGA-
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">TOUCHSCREEN/MULTI-TOUCH APPLE/IOS-4.0 1.5LBS 1YR
          </span>
        </span>
      </p>          </td>       
  </tr>
</table>
<p> &nbsp;
</p>                       
</span>            
</div>

It will cut the overlapping text but it will fit in the parent div.

Upvotes: 1

CyrillC
CyrillC

Reputation: 557

to force it just give the table the max-width attribute. You've set the width attribute to 576px which surely is bigger than the 500px div.

style="max-width:500px; height: 120px;">

greets

Upvotes: 0

Related Questions