html - Container div not Aligning properly -
i have container div not aligning properly, nor can keep divs inside container div aligned right or left. keeps on coming out of main div or container.
here's simple homepage design divs not indenting according layout:
#container{ background-color:white; width:100%; height:1200px; } #logo{ background-color:yellow; width:30%; height:100px; float:left; } #header{ background-color:green; width:100%; height:100px; float:left; } #navigation{ width:100%; height:40px; background-color:white; float:left; } #webname{ background-color:gray; width:70%; height:100px; float:right; } #mainclass{ width:100%; height:950px; float:left; } #asideright{ background-color:red; width:10%; height:950px; float:right; } #asideleft{ background-color:purple; width:20%; height:950px; float:left; } #selection{ background-color:yellow; width:70%; height:950px; float:center; } #footer{ background-color:green; width:100%; height:100px; float:;left; }
<html> <head> <title id="title">dummy </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="webname"> </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>
this correct css
#container { background-color: white; width: 100%; height: 1200px; } #logo { background-color: yellow; width: 30%; height: 100px; float: left; } #header { background-color: green; width: 100%; height: 100px; float: left; } #navigation { width: 100%; height: 40px; background-color: white; float: left; } #webname { background-color: gray; width: 70%; height: 100px; float: right; } #mainclass { width: 100%; height: 950px; /*float: left;*/ } #asideright { background-color: red; width: 10%; height: 950px; float: right; } #asideleft { background-color: purple; width: 20%; height: 950px; float: left; } #selection { background-color: yellow; width: 70%; height: 950px; float: left; } #footer { background-color: green; width: 100%; height: 100px; float: left; }
Comments
Post a Comment