1 reply [Last post]
heng
heng's picture
Offline
newbie
Last seen: 7 years 37 weeks ago
Timezone: GMT-8
Joined: 2013-02-06
Posts: 1
Points: 2

dear all i'm a new starter i try to design a web layout but i have problem with my bodyset it cover all sponsorleft content sponsorright but all of them float out of my bodyset so can anyone tell how to fix it? here my code

#container {
	margin: 0 auto 0 auto;
	padding: 7px;
	background: #F8F8F8;
	border: 1px solid #F0F0F0;
	width: 999px;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
#wrapedpage{
	background:#FFF;
	border: 1px solid #E0E0E0;
	-webkit-border-radius: 5px;
    border-radius: 5px;
}
/*header set*/
#headerset {
	height:160px;
	margin:1px;
}
#sclogo {
	height: 160px;
	width:160px;
	border:1px solid green;
	float: left;
}
#mainads {
	margin:0 0 0 10px;
	border:1px solid red;
	width: 819px;
	float: right;
}
/*menuset*/
 
#bodyset {
	border: 1px solid yellow;
	margin:40px 0 0 0;
	padding: 10px 0 0 0;
	clear: both;
}
#sponsorleft {
	width: 200px;
	border:1px solid blue;
	float: left;
}
#contents {
	border: 1px solid green;
	float:left;
	width: 400px;
}
#sponsorright{
	border: 1px solid red;
	width:200px;
	float: right;
}
#footerset {
	clear:both;
	border: 1px solid gray;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample Template</title>
</head>
<body>
<div id="container">
<div id="wrapedpage">
	<div id="headerset">
		<div id="sclogo">Logo</div>
		<div id="mainads">Ads here!</div>
	</div>
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">Tips</a></li>
			<li><a href="#">Reviews</a></li>
			<li><a href="#">App</a></li>
			<li><a href="#">About us</a></li>
		</ul>
	</div>
	<div id="bodyset">
		<div id="sponsorleft">Sub menu</div>
		<div id="contents">Contents</div>
		<div id="sponsorright">Sponsor</div>
	</div>
	<div id="footerset">
		footer
	</div>
</div>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 46 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

See Enclosing float

See Enclosing float elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.