Having problems with <div's>, alignment and use of wrappers to format page


#1


Having problems getting my two rows of div's to span the entire page. I was trying to use the wrapper to include the div's and force the page width to 100%, but I'm guessing I am missing something here. The top row, which consists of three div's (left, middle and right) don't have the same width as the footer below. Here's my html and CSS below. Thanks in advance for the help.


<!DOCTYPE html>
<html>
    <head>
    	<title>Insert Name Here</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
	</head><body>

<div id="wrapper">
<div>
	<div class="left">
		<img src="#"> <!--insert head img here-->
			<ul>
				<a href="index.html"><li>Home</li></a>
				<a href="about.html"><li>About Me</li></a>
				<a href="projects.html"><li>Projects</li></a>
				<a href="resume.html"><li>Resume</li></a>
			</ul>
	</div>

	<div class="center">
		<h1>My name</h1>
		<h2>my email</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere euismod semper. Phasellus nunc arcu, imperdiet a tempus sed, efficitur lacinia enim. Vivamus pulvinar, lectus vel sollicitudin dapibus, urna enim tincidunt ligula, pulvinar pretium urna nunc eget elit. Fusce congue nibh in sem tempor, nec porta sapien pretium. Curabitur enim lectus, tempor placerat magna ac, faucibus varius quam. Suspendisse imperdiet tempus lorem quis lacinia. Nulla facilisi. Ut ut justo id augue malesuada condimentum. Suspendisse potenti. Etiam metus justo, tempus et dui ac, finibus ultrices diam. In sit amet vehicula elit.</p>
</div>
	<div class="right">
	right side of page
	</div>
</div>

	<div class="footer">
	<ul>
		<li>Link 1</li>
                 <li>Link 2</li>
	         <li>Link 3</li>
	</ul>
	</div>
</div>

</body>
</html>

-------- CSS -----------

body {
    width: 100%;
    height: 100%;
    margin:0;
    font-family: Helvetica, Arial, sans-serif; 
}

h1 {
   font-size:40px;
}

p {
	font-size:14px;
}

#wrapper {
	width:100%;
	margin:0 auto;
}

.left li {
	color: black;
	font-size:18px;
	height: 80px;
	list-style: none;
	text-align: center;
}

.left ul {
	width:100%;
	padding:0px;
}

ul:before {
	content: '';
	position: absolute;
	width: 50%;
	left: 35%;
	margin:-20px;
	border-top: 2px solid black;
}

ul:after {
	content: '';
	position: absolute;
	width: 50%;
	left: 25%;
	margin:-20px;
	border-top: 2px solid white;
}

.footer ul:first-child:before {
	border-top:none;
}
.footer ul:last-child:after {
	border-top:none;
}

a:link, a:visited {
	text-decoration: none;
}

.left img {
	clear:left;
	width:40%;
	margin:auto;
	display:block;
	padding:10px;
}

.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 10%;
	height: 400px;
	background-color: #B9D7D9;
	margin-bottom: 0px;
	border:2px solid black;
	background: #FFFFFF;
}

.center {
	position: relative;
	float: left;
	margin-top: 50px;
	width:60%;
	height: 400px;
	background-color: #F4EBC3;
	margin-bottom: 0px;
	border:2px solid black;
	overflow:auto;
	padding-left:20px;
}

.right {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 20%;
	height: 400px;
	background-color: #F4EBC3;
	margin-bottom: 0px;
	border:2px solid black;
}

.footer {
	position: relative;
	height: 50px;
	background-color: #668284;
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	width:96%;
	border:2px solid black;
}

.footer li {
	display:inline;
	padding: 5px;
	margin:auto;
}


#2

@danj707,

<!DOCTYPE html>
<html>
  <head>
    <title>Insert Name Here</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  </head>
  <body>

    <div id="wrapper">
      <!-- you want the wrapper to wrap LEFT CENTER RIGHT -->
        <div class="left">
          <img src="#"> <!--insert head img here-->
          <ul>
             <!-- an un-ordered list with li containing ANCHOR and COMMENT -->
             <li><a href="index.html">Home</a></li>
             <li><a href="about.html">About Me</li></a>
             <li><a href="projects.html">Projects</a></li>
             <li><a href="resume.html">Resume</a></li>
          </ul>
        </div>
        <div class="center">
          <h1>My name</h1>
          <h2>my email</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere euismod semper. Phasellus nunc arcu, imperdiet a tempus sed, efficitur lacinia enim. Vivamus pulvinar, lectus vel sollicitudin dapibus, urna enim tincidunt ligula, pulvinar pretium urna nunc eget elit. Fusce congue nibh in sem tempor, nec porta sapien pretium. Curabitur enim lectus, tempor placerat magna ac, faucibus varius quam. Suspendisse imperdiet tempus lorem quis lacinia. Nulla facilisi. Ut ut justo id augue malesuada condimentum. Suspendisse potenti. Etiam metus justo, tempus et dui ac, finibus ultrices diam. In sit amet vehicula elit.</p>
        </div>
        <div class="right">
           <p>right side of page</p>
        </div>
    </div> <!-- closing the wrapper -->

    <div class="footer">
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    </div> <!-- closing the FOOTER -->
  </body>
</html>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a