Width (and a little Height)
(Generally: Divs go out...Tables go in")
Remember that the general rule is width/height is actually the width/height of the containing (content) block + border + padding + margin. Some examples using borders/padding (divs 1st/tables 2nd):
100px x 100px div w/ 1px border
100px + 1px + 1px = 102px
100px x 100px div w/ 10px border
100px + 10px + 10px = 120px
100px x 100px div w/ 10px border & 10px padding
100px + 10px + 10px + 10px + 10px= 140px
Uh Oh!
Floated inside boxes bigger than outside box (IE vs. FF) In IE6 the outside box would stretch
Fixed #1
Floated inside boxes reset. Note: slight overadjustment
Fixed #2
Outside box reset
| hello, I'm a Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
hi
|
bye
|
| hello, I'm a layout: fixed Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
hi
|
bye
|
| hello, I'm a Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
100px; 5px border
|
100px; 5px border
|
| hello, I'm a layout-fixed Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
100px; 5px border
|
100px; 5px border
|
| hello, I'm a Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
50%; 5px border
|
5px border
|
| hello, I'm a layout-fixed Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
50%; 5px border
|
5px border
|
| hello, I'm a Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
30px
|
n/a
|
n/a
|
n/a
|
| hello, I'm a layout-fixed Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch.
|
|
30px
|
n/a
|
n/a
|
n/a
|
| hello, I'm a layout-fixed Table...height/width set. Borders and Padding apply "inside" the height/width that I set. (5px border, 10px padding) Don't forget if the content is bigger the table/cell walls will stretch. Each cell set to 25% based on contextual css.
|
|
25%
|
n/a
|
n/a
|
n/a
|