user979331 user979331 - 2 months ago 5x
HTML Question

td widths, not working?

So I have this code here....

<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
<a href="#">Home</a>
<td width="1000px" valign="top">Content</td>

with the CSS

.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;

.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;

It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width...I have no idea what he is talking about...Does any one know why he or she is seeing the width change on the td...I hope this makes sense...I am exhausted


It should be:

<td width="200">


<td style="width: 200px">

Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.


As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.