Jump to content

CSS div falls out of its parent


rassul
 Share

Recommended Posts

I have a div called footer that falls outside of its container parent. Please refer to the picture. Please help me to fix it. Thanks in advance.post-132566-0-64675400-1363824511_thumb.jpgpost-132566-0-64675400-1363824511_thumb.jpg

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>		<style type="text/css" media="screen">			* {margin: 0;			   padding: 0;			}			#container {width: 70%;						height: 400px;						background: gray;						border: 2px solid black;			}			#side {width: 30%;				   height: 400px;			  				   background: #FF6600;				   overflow: auto;				   text-align: center;				   float: right;			}			#footer {width: 100%;					 height: 45px;					 background: yellow;					 clear: both;			}		</style></head><body><div id="container" >Container		<div id="side">Side</div>		<div id="footer">Footer</div></div></body></html>

Link to comment
Share on other sites

I have a div called footer that falls outside of its container parent. Please refer to the picture. Please help me to fix it. Thanks in advance.post-132566-0-64675400-1363824511_thumb.jpgpost-132566-0-64675400-1363824511_thumb.jpg
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>		<style type="text/css" media="screen">			* {margin: 0;			   padding: 0;			}			#container {width: 70%;						height: 400px;						background: gray;						border: 2px solid black;			}			#side {width: 30%;				   height: 400px;			  				   background: #FF6600;				   overflow: auto;				   text-align: center;				   float: right;			}			#footer {width: 100%;					 height: 45px;					 background: yellow;					 clear: both;			}		</style></head><body><div id="container" >Container		<div id="side">Side</div>		<div id="footer">Footer</div></div></body></html>

I uploaded the same image twice, ignore one.
Link to comment
Share on other sites

Try this...

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title><style type="text/css" media="screen">* {margin: 0;padding: 0;}#container {width: 70%;min-height: 400px;background: gray;border: 2px solid black;}#side {width: 30%;height: 400px;						background: #FF6600;overflow: auto;text-align: center;float: right;}#footer {width: 100%;height: 45px;background: yellow;clear: both;}</style></head><body><div id="container" >Container				<div id="side">Side</div>				<div id="footer">Footer</div></div></body></html>

Hope it helps

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...