Advanced Search

Return to Snippet

Revision: 19571
at October 26, 2009 07:01 by bluestan
Updated Code 
<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>

Revision: 19570
at October 26, 2009 07:00 by bluestan
Initial Code 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<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>
Initial URL 









Initial Description














Initial Title





CSS Positioning









Initial Tags





css, html









Initial Language





HTML