Posted By

bluestan on 10/26/09

Tagged

css
html

Versions (?)

Last Edited at 10/26/09 07:00am

Statistics

Viewed 631 times

Favorited by 1 user(s)

Related snippets

CSS Positioning

/ Published in: HTML

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<html>
<head>
<style type="text/css">
#maincontain{
	float:left;
	border:2px solid #DCDCDC;
}
 
#maintable-parent{
position:relative;
}
#maintable{
    position:inherent;  
	border:2px solid #DCDCDC;
	margin:0;
	width:700px;
	background:green;
}
 
 
#filetable{
    float:left;
	border:1px solid gray;
	left:0;
	top:25px;
	margin:0;
	width:100%;
	height:auto;
	z-index:0;
}
 
#batchtable{
	position:absolute;
	top:0;
	right:0px;
	width:250px ;
	height:250px;
	overflow-x:hidden;
	overflow-y:auto;
	background-color:yellow;
	border:2px solid gray;
 
}
 
#footer{
	clear:both;
}
 
#div-1a {
	position:absolute;
	border:1px solid #3B5998;
	top:0;
	right:0;
	width:200px;
}
 
</style>
</head>
<body>
<div id="maincontain">
This is maincontain, float:left
<div id="maintable-parent">
	<div id="maintable">
		this is maintable, position:relative
		<div id="filetable">
		<table border="1">
			<tr><td>float:left</td></tr>
			<tr><td>wwww</td></tr>
			<tr><td>wwww</td></tr>
		</table>
		</div>
		<div id="batchtable">
		<table border="1">
			<tr><td>position:absolute(relative to maintable)</td></tr>
			<tr><td>eeee</td></tr>
			<tr><td>eeee</td></tr>
		</table>
		</div>
 
	</div>
</div>
</div>
<div id="footer">this is a footer(clear:both)</div>
<div id="div-1a">position:absolute(relative to document)</div>
</body>
</html>