css layout problems

**lancewatson** · Nov 20, 2011 01:38

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 1000pxlo1.jpg

html code:

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:

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;	}