Difference between revisions of "HTML div"
| Line 1: | Line 1: | ||
| − | <code> | + | <code></pre> |
| − | <div style="position: relative; width: 728px; height: 200px; background-color:#CCCCCC"> <!--This is the containing div position: relative to flow in sequence with the rest of the page.--> | + | <div style="position: relative; width: 728px; height: 200px; background-color:#CCCCCC"> |
| + | <!--This is the containing div position: relative to flow in sequence with the rest of the page.--> | ||
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;"> | <div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;"> | ||
| + | |||
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height) | position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height) | ||
| + | |||
</div> | </div> | ||
<div style="position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink;"> | <div style="position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink;"> | ||
| − | position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border | + | |
| + | position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: | ||
| + | pink; overall width 248px including 2*3px padding and 2*1px border | ||
</div> | </div> | ||
| + | |||
<div style="position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow;"> | <div style="position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow;"> | ||
| − | position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border | + | |
| − | + | position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: | |
| + | |||
| + | yellow; overall width 218px including 2*3px padding and 2*1px border | ||
</div> | </div> | ||
| + | </div></pre> | ||
</code> | </code> | ||
Revision as of 10:39, 17 June 2011
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color:
pink; overall width 248px including 2*3px padding and 2*1px border
position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color:
yellow; overall width 218px including 2*3px padding and 2*1px border
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
position: absolute; top: 10px; left: 3px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
position: absolute; top: 25px; left: 507px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
