Advanced Search

CSS Positioning

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.