Question

I’ve placed a table inside a div and set the table width to 100%. I am placing an icon to the left of the table within the div, so I used a margin-left property to shift the table over and place the icon using position:absolute and top and left properties. That all works just fine, however the table width is shifted outside of the parent div – apparently because of the left-margin setting. Since I need the table to expand dynamically depending on the browser window’s width I cannot just set a fixed size to keep the table within the div. Ultimately I could wrap all of the div content within a table and layout the elements that way, but I was hoping there would be a better, simpler solution by adjusting my css. Thanks!

What I’m trying to achieve:

|-margin-|
+--------------------------------------------------------------------+
| (div)   +---------------------------------------------------------+|
|         | (table)                                                 ||
|         |                                                         ||
|         +---------------------------------------------------------+|
+--------------------------------------------------------------------+

What I’m getting:

|-margin-|
+--------------------------------------------------------------------+
| (div)   +----------------------------------------------------------|-------+
|         | (table)                                                  |       |
|         |                                                          |       |
|         +----------------------------------------------------------|-------+
+--------------------------------------------------------------------+

Update:
Thanks for all the suggestions. As I was typing out an even longer winded response the answer dawned on me. I thought that width:100% meant “fill but remain within the boundaries of the parent element”, not “assume the designated width of the parent element”. Since the margin-left:80px property set on the table was causing all the trouble I removed it and simply set the div’s padding-left:80px and that fixed the problem.

@Ace – I really wasn’t “asking people to do all the work for me”. Since I described exactly what I did I figured the very simple css wasn’t necessary, but I suppose it might have been helpful. So here it is, along with the final css that worked:

Original css:

.mydiv {
position:relative;
border:1px solid #000000;
}
.myicon {
position:absolute;
left:20;
top:15;
}
.mytable {
border:1px solid #000000; //so I can see it
table-layout:auto;
width:100%;
margin-left:80px;
} 

Final css:

.mydiv {
position:relative;
padding-left:80px;
border:1px solid #000000;
}
.myicon {
position:absolute;
left:20;
top:15;
}
.mytable {
border:1px solid #000000; //so I can see it
table-layout:auto;
width:100%;
}

Answer 1

Removed tables’s margin-left:80px and added padding-left:80px to the div container:

.mydiv {
position:relative;
padding-left:80px;
border:1px solid #000000;
}
.myicon {
position:absolute;
left:20;
top:15;
}
.mytable {
border:1px solid #000000; //so I can see it
table-layout:auto; 
width:100%;
}