Best to see the code for yourself. The server it’s being hosted on is secure and unfortunately I’m not allowed to give out the password freely.
What’s happening is I have three large divs that are theoretically supposed to be aligned one next to the other, but the third one drops down all the way to the bottom right, despite all my width values being added up to 100%. Thanks in advance everyone, as usual.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>INT222</title>
<link rel="stylesheet" href="./css/mycss.css" type="text/css" media="screen" />
</head>
<body class = "body">
<div class="bdiv">
<nav class="nav">
<ul>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/">My Zenit Account</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/index.html">Home</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/gallery.html">Picture Gallery</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/video.html">Video</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/audio.html">Audio</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/tables.html">Tables</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/forms.html">Forms</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/css/mycss.css">CSS Used</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/other.html">Other</a></li>
</ul>
</nav>
</div>
<form method="post" action="https://zenit.senecac.on.ca/~int222_122a07/assign2/index.html" id="formex1">
<div class = "left1">
<h1 class = "mama">Mama's Pizza</h1> <br />
<hr />
<h1 class = "mama2">416 or 905 <br /> 222-6262</h1> <br />
<hr />
<table class="prices">
<tr>
<td>Small</td>
<td>$11.55</td>
</tr>
<tr>
<td>Medium</td>
<td>$15.25</td>
</tr>
<tr>
<td>Large</td>
<td>$22.00</td>
</tr>
<tr>
<td>X-Large</td>
<td>$25.00</td>
</tr>
<tr>
<td>Toppings</td>
</tr>
<tr>
<td>$1.79 Each</td>
</tr>
<tr>
<td>Plus 13% HST</td>
</tr>
<tr>
<td>Free Delivery</td>
</tr>
</table>
<p>
Your Price<br />
<input type="text" name="total" value="" readonly="readonly" />
</p>
</div>
<div class = "left2">
<div class = "pdiv">
<fieldset><legend>Personal Information</legend> <br />
Name <input type = "text" name = "Name" /> <br />
Account No. <input maxlength="10" size="10" name = "account#" /> <br />
Phone No. <input maxlength = "12" size = "12" name = "Phone#" /> <br />
Date of Birth <input maxlength = "7" size = "7" name = "DOB" />
</fieldset>
</div>
<div class = "pscdiv">
<fieldset><legend>Pizza Size & Crust</legend> <br />
<p>
<select name="pizza-size" size="5">
<option value="1"> Select Pizza Size </option>
<option value="2"> Small </option>
<option value="3"> Medium </option>
<option value="4"> Large </option>
<option value="5"> X-Large </option>
</select>
</p>
<p>
<select name="crust" size="3">
<option value="1"> Regular Crust </option>
<option value="2"> Thin Crust </option>
<option value="3"> Thick Crust </option>
<option value="4"> Whole Wheat Crust </option>
</select>
</p>
</fieldset>
</div>
<div class = "csdiv">
<fieldset><legend>Cheeses</legend> <br />
<p>
<input type = "radio" name = "Cheeses" value = "Mozzarella" />Mozzarella<br />
<input type = "radio" name = "Cheeses" value = "Reduced Fat" />Reduced Fat<br />
<input type = "radio" name = "Cheeses" value = "Feta" />Feta<br />
</p>
</fieldset>
</div>
<div class = "cdiv">
<fieldset><legend>Sauces</legend> <br />
<p>
<input type = "radio" name = "Sauces" value = "Pizza Sauce" />Pizza Sauce<br />
<input type = "radio" name = "Sauces" value = "BBQ Sauce" />BBQ Sauce<br />
<input type = "radio" name = "Sauces" value = "Garlic Sauce" />Garlic Sauce<br />
</p>
</fieldset>
</div>
<div class = "div6">
<fieldset><legend>Special Instructions</legend> <br />
<p>
<textarea name="Additional Comments" cols="32" rows="6"></textarea>
</p>
</fieldset>
</div>
<div class = "srdiv">
<input type="submit" value="Place Your Order" />
<input type="reset" value="Start Over" />
</div>
</div>
<div class = "right">
<fieldset><legend>Choose Toppings - $1.79 Each</legend> <br />
<div class = "tdiv1">
<p>
<input type="checkbox" name="Toppings" value="1" />Anchovies<br />
<input type="checkbox" name="Toppings" value="2" />Bacon<br />
<input type="checkbox" name="Toppings" value="3" />Ham<br />
<input type="checkbox" name="Toppings" value="4" />Pepperoni<br />
<input type="checkbox" name="Toppings" value="5" />Salami<br />
<input type="checkbox" name="Toppings" value="6" />Sausage<br />
</p>
</div>
<div class = "tdiv2">
<p>
<input type="checkbox" name="Toppings" value="7" />Broccoli<br />
<input type="checkbox" name="Toppings" value="8" />Green Olives<br />
<input type="checkbox" name="Toppings" value="9" />Green Peppers<br />
<input type="checkbox" name="Toppings" value="10" />Mushrooms<br />
<input type="checkbox" name="Toppings" value="11" />Red Onion<br />
<input type="checkbox" name="Toppings" value="12" />Roasted Garlic<br />
</p>
</div>
</fieldset>
</div>
<br />
</form>
</body>
</html>
.body {
width: 1024px;
margin: auto;
}
.bdiv{
position: relative;
border: solid 2px;
}
.nav ul{
list-style-type: none;
overflow: hidden;
}
.nav ul li {
display: block;
float: left;
padding: 0 25px;
}
.mdiv {
position: relative;
clear: both;
}
.h1 {
text-align: left;
color: #FFFFFF;
font-style: italic;
font-family: sans-serif;
border-style: groove;
padding: 4px;
}
.div1 {
background-color: #990000;
}
.subject {
font-size: 40px;
font-weight: bold;
}
.div2 {
width: 66%;
position: relative;
float: left;
}
.div3 {
width: 33%;
position: relative;
float: right;
}
.subject2 {
font-size: 24px;
font-family: monospace;
font-weight: bold;
text-align: center;
}
.list1 {
list-style-type: none;
}
footer {
vertical-align: middle;
text-align: center;
clear: both;
background-color:#990000;
color: #FFFFFF;
}
.fbody {
background-color:#0f0000;
width:1000px;
margin:auto;
color:#009900;
}
.left1{
display:table;
width: 20%;
float: left;
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
}
.left2 {
display:table;
width: 35%;
float: left;
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
}
.right {
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
width: 45%;
float: right;
clear: both;
}
.prices {
border: ridge 5px;
margin: auto;
text-align: center;
}
.pscdiv1 {
alignment-adjust: middle;
display: table-row;
}
.srdiv {
text-align: center;
}
.tdiv1 {
float: left;
border: none;
padding: 20 0px;
}
.tdiv2 {
margin-left: auto;
text-align: justify;
float: right;
padding: 0 35px;
}
It’s because you have
clear:bothset on the final container. Also, it’s best to use a standardclass="left"on all 3 containers, and then set a different width for each individual container.Using
float:leftandfloat:righttogether can cause unusual behaviour in such a case.Finally, border is included into the width percentage, to workaround this you can use CSS3 and
box-sizing: border-box;however it’s a better idea to reduce your widths to 99%.Here is an example fiddle from your code: click.