Posted By

bluestan on 10/26/09


Tagged

css html relative absolute position


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

vali29
WinterCrow
andy2577


CSS Positioning


 / Published in: HTML
 

  1. <style type="text/css">
  2. #maincontain{
  3. float:left;
  4. border:2px solid #DCDCDC;
  5. }
  6.  
  7. #maintable-parent{
  8. position:relative;
  9. }
  10. #maintable{
  11. position:inherent;
  12. border:2px solid #DCDCDC;
  13. margin:0;
  14. width:700px;
  15. background:green;
  16. }
  17.  
  18.  
  19. #filetable{
  20. float:left;
  21. border:1px solid gray;
  22. left:0;
  23. top:25px;
  24. margin:0;
  25. width:100%;
  26. height:auto;
  27. z-index:0;
  28. }
  29.  
  30. #batchtable{
  31. position:absolute;
  32. top:0;
  33. right:0px;
  34. width:250px ;
  35. height:250px;
  36. overflow-x:hidden;
  37. overflow-y:auto;
  38. background-color:yellow;
  39. border:2px solid gray;
  40.  
  41. }
  42.  
  43. #footer{
  44. clear:both;
  45. }
  46.  
  47. #div-1a {
  48. position:absolute;
  49. border:1px solid #3B5998;
  50. top:0;
  51. right:0;
  52. width:200px;
  53. }
  54.  
  55. </head>
  56. <div id="maincontain">
  57. This is maincontain, float:left
  58. <div id="maintable-parent">
  59. <div id="maintable">
  60. this is maintable, position:relative
  61. <div id="filetable">
  62. <table border="1">
  63. <tr><td>float:left</td></tr>
  64. <tr><td>wwww</td></tr>
  65. <tr><td>wwww</td></tr>
  66. </table>
  67. </div>
  68. <div id="batchtable">
  69. <table border="1">
  70. <tr><td>position:absolute(relative to maintable)</td></tr>
  71. <tr><td>eeee</td></tr>
  72. <tr><td>eeee</td></tr>
  73. </table>
  74. </div>
  75.  
  76. </div>
  77. </div>
  78. </div>
  79. <div id="footer">this is a footer(clear:both)</div>
  80. <div id="div-1a">position:absolute(relative to document)</div>
  81. </body>
  82. </html>

Report this snippet  

You need to login to post a comment.