I am trying layout this site to the following specs. The aside 2 is being a little cranky, header2 and main are not reponsive!
container 1000px.
header- 1000 px width that will have sub containers I have not started on yet. They will be logo, social media and nav.
aside- 250 px floated left
aside 2- 250px floated right
header 2- 500px in the center
main- 500px in the center below header 2
footer 1000px
html code:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>UAW 1002 Middleville, Michigan 49333 </title>
<meta name="description" content="Bulldog Web Development is a web design company,s tn from Grand Rapids, Michigan." >
<meta name="keywords" content="custom web design, web design, " >
<link rel="stylesheet" href="styles.css" media="all">
<script src="js/modernizr-1.7.min.js"></script>
</head>
<div id="wrapper">
<body>
<header>
header
</header>
<aside>aside</aside>
<div id"header2">header2</div>
<div id"main">main</div>
<div id"aside2">aside2</div>
<footer>
<p>footer</p>
</footer>
<script type="text/javascript" src="js/general.js"></script>
</body>
</div>
</html>
CSS CODE:
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 0 auto;
width: 1000px;
height: 1000px;
}
header{
float:left;
width: 1000px;
height: 100px;
background-color:red ;
}
aside{
float:left;
width: 250px;
height: 500px;
background-color:blue ; }
#header2{
float:left;
width: 500px;
height: 500px;
background-color: green ;
margin: 1px; }
#main{
float:left;
width: 500px;
height:300px;
background-color: blue;}
#aside2{
float: left;
width: 225px;
height: 600px;
background-color: red;
margin-right: 0 ;
}
footer{
float:left;
width: 1000px;
height: 300px; }