multiple div tags css

In an attempt to replace table tag with div tags, I need to include 20 div tags in my html code as shown below.
resume1I have started with div tags 1, 2, and 4, but I am having issues in positioning my div tags correctly as shown below: moveQuestion: How can I modify the html/css below so that div tag is moved to the position?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Resume- Mike Eghtebas</title>
    <link rel="stylesheet" type="text/css" href=".\styles\resume.css"/>
</head>
<body>
    <form id="form1" runat="server">
   <div class="wrapper">
      <div class="header">
            <div class="contact">
                <span >&nbsp;</span> <br />       
                <span class="contactBlue"> Contact:   </span><br>
                <span>email: MEghtebas@gmail.com</span><br/>
               <span>Phone: (949) 533-8239</span><br/>
            </div>
            <div class="nameBlock">
              <span class="name"">Mike M Eghtebas</span><br/>
              <span class="title">Database Application Developer</span>
            </div>
      <div class="content">
            <div class="left-col"></div>
            <div class="right-col"></div>
      </div>
      <div class="footer"></div>
</div>
    </form>
</body>
</html>
css:-------------
body
{
 background-color:rgb(238,238,238);
}
.wrapper
{
   margin:0 auto; 
    padding: 2em 2em 3em 1em;
    width: 70%;
     border: 0px solid black;
	background-color:white;
	box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.contact
{
	font-size:1em;
	font-family:"Tahoma","sans-serif";
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	width: 19%;
border: 1px solid black;
}
.contactBlue
{
  font-size:1.1em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock
{
  width: 27%;
  border: 1px solid black;
  float:top;
}
.name
{
  font-size:1.3em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title
{
  font-size:1em;
  font-family:"Tahoma","sans-serif";
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
Mike,

Is your page going to be interactive or is any of the data going to come from the server? Why do you have a form?
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
The opening page (my resume) is static. I have started it in visual studio which by default adds form.

There will be a some hyperlinks in the resume to open a few demo projects that are dynamic and interact with SQL Server.

Mike
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Although for now this page is static, but later on it could be turned a dynamic page. Meaning after a sign-in, what is displayed could be different (coming from a SQL Server table) as appropriate and relevant to the viewer.
0
Kyle HamiltonData ScientistCommented:
ok. so for now, let's take all that server side code out. Anything that your editor puts in for you , you need to remove.

I've created a jsfiddle for you to look at: http://jsfiddle.net/25suLLyz/1/

this is incorrect:
<html xmlns="http://www.w3.org/1999/xhtml">

Open in new window

We are wrinting this in HTML5, not XHTML. So you need to remove that, and replace with:
<html>

Open in new window


A couple of things:

1. Keep your structure and your styling separate. That's why I advised not to do any of the styling until you got your structure in place.

2. At the top of the css, you will see *{box-sizing:border-box}. This will allow you to create elements using widths without having to worry about accommodating padding and borders. You should look up box-sizing, and the box model

3. left and right columns are floated. this allows them to appear side by side. Since floated elements don't fill the container's space, you may want to 'fix' that by adding a clearfix rule. Remove the rule to see what happens.

4. We weren't going to do fonts and colors yet, but seeing as you have... Set your global font family in the body tag, so you are not duplicating it all over the css file. Set your font-size to 100% in the body. This will ensure that the default font size for all elements is going to be 1em. No need to duplicate this.

5. html 5 elements such as br do not need the ending slash: use <br>, not <br/>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you very much for the wealth of information.

Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.