Divs not doing what I want them to do!

13geekqueen · 03-19-2013, 04:06 PM

I am trying to design a site, and the <div class="right"> is not positioning how i want it. It should be positioned how the <div class="left"> is, but on the right side, but instead is below the text.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title></title>
</head>
<body>
<div id="header"><h1>Sponsor-a-Lesson!</h1></div>
<div class="left"></div>
<h2>For only $20, you can sponsor an ELA lesson in Mr. Daley's class!</h2>
<ul>
<li>Your business name will be put on the board-- right where students look!</li>
<li>You business will be mentioned positively 3 times per class period!*</li>
<li>For an extra $10, Mr. Daley will wear a shirt with your logo on it!</li>
<li>For an extra $5, you business logo will be drawn on Mr. Daley's bald head!</li>
<li>This is perfect for resturants, stores, and other local businesses that cater especially to teenagers!</li>
</ul>
<h2>About Mr. Daley's class</h2>
<p>Mr. Daley teaches 8th grade English Language Arts at Nessacus Regional Middle School,
which has students from Dalton, Hinsdale, and the Hilltowns, as well as some school choice students from Pittsfield.
He is considered to have a sense of humor, and came up with the idea for the 'Sponsor-a-Lesson' himself!</p>
<h4>*For $1 extra, you can have your business mentioned even more-- $1 per extra time.</h4>
<table>
<thead>
<th></th>
<th>Just a sponsoring</th>
<th>Add the T-Shirt</th>
<th>Add Mr. Daley's Head</th>
</thead>
<tr>
<td class="pricing">Just a sponsoring</td>
<td>$20</td>
<td>$30</td>
<td>$25</td>
</tr>
<tr>
<td class="pricing">Add the Shirt</td>
<td>$30</td>
<td>X</td>
<td>$35</td>
</tr>
<tr>
<td class="pricing">Add Mr. Daley's Head</td>
<td>$25</td>
<td>$35</td>
<td>X</td>
</tr>
</table>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>

My CSS:
body {
background-color:#F3E9D8;
}
#header {
margin-top:0px;
width:100%;
height:80px;
background-color:#80FF44;
border:#00AE44 5px solid;
border-radius:50px;
position:fixed;
z-index:1;
}
.left {
margin-top:100px;
width:80px;
height:800px;
background-color:#FF606E;
border:#CC2341 5px solid;
border-radius:50px;
float:left;
}
.right {
margin-top:100px;
width:80px;
height:800px;
background-color:#FF606E;
border:#CC2341 5px solid;
border-radius:50px;
float:right;
}
#footer {
width:100%;
height:80px;
background-color:#00A1FF;
border:#0026FF 5px solid;
border-radius:50px;
clear:both;
}
h1 {
font-family:"Tauri";
text-align:center;
font-size:60px;
margin-top:0px;
}
h2 {
font-family:"Tauri";
text-align:center;
padding-top:100px;
}
ul {
font-family:"Tauri";
text-align:center;
list-style-type:none;
}
p {
font-family:"Tauri";
padding-left:100px;
padding-right:100px;
text-align:center;
font-size:16px;
}
h4 {
font-family:"Tauri";
padding-left:100px;
padding-right:100px;
text-align:center;
}
table {
margin-left:120px;
margin-right:120px;
font-family:"Tauri";
padding-left:140px;
padding-right:140px;
text-align:center;
border:2px solid black;
border-radius:10px;
}
th {
font-family:"Tauri";
padding-left:20px;
padding-right:20px;
text-align:center;
border:1px solid black;
border-radius:10px;
}
.pricing {
font-family:"Tauri";
padding-left:20px;
padding-right:20px;
text-align:center;
border:1px solid black;
border-radius:10px;
}
td {
font-family:"Tauri";
padding-left:20px;
padding-right:20px;
text-align:center;
border:1px dashed black;
border-radius:10px;
}

Screenshots:
at the following link:
http://9gag.com/gag/6850656

ttkim · 03-19-2013, 04:49 PM

You can do this.

Put everything in between the left/right divs inside another div called "center". For example, notice how I have a "center" div.

Code:

<div class="center">
<h2>For only $20, you can sponsor an ELA lesson in Mr. Daley's class!</h2>
<ul>
<li>Your business name will be put on the board-- right where students look!</li>
<li>You business will be mentioned positively 3 times per class period!*</li>
<li>For an extra $10, Mr. Daley will wear a shirt with your logo on it!</li>
<li>For an extra $5, you business logo will be drawn on Mr. Daley's bald head!</li>
<li>This is perfect for resturants, stores, and other local businesses that cater especially to teenagers!</li>
</ul>
<h2>About Mr. Daley's class</h2>
<p>Mr. Daley teaches 8th grade English Language Arts at Nessacus Regional Middle School, 
which has students from Dalton, Hinsdale, and the Hilltowns, as well as some school choice students from Pittsfield.
He is considered to have a sense of humor, and came up with the idea for the 'Sponsor-a-Lesson' himself!</p>
<h4>*For $1 extra, you can have your business mentioned even more-- $1 per extra time.</h4>
<table>
<thead>
<th></th>
<th>Just a sponsoring</th>
<th>Add the T-Shirt</th>
<th>Add Mr. Daley's Head</th>
</thead>
<tr>
<td class="pricing">Just a sponsoring</td>
<td>$20</td>
<td>$30</td>
<td>$25</td>
</tr>
<tr>
<td class="pricing">Add the Shirt</td>
<td>$30</td>
<td>X</td>
<td>$35</td>
</tr>
<tr>
<td class="pricing">Add Mr. Daley's Head</td>
<td>$25</td>
<td>$35</td>
<td>X</td>
</tr>
</table>
</div>

After you do that, arrange the left, right, and center divs like this:

Code:

<div class="left"></div>
<div class="right"></div>
<div class="center">...</div>

Notice that the "right" div is actually second. Then, add this to your CSS file:

Code:

.center {
	margin-left: 80px;
	margin-right: 80px;
}

I used 80 pixels because that's the width of your left and right divs.

13geekqueen · 03-19-2013, 05:42 PM

Thank you! It worked!