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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -