I have a 3-column layout. The furthest right column contains a table. Everything works when I delete the table. When the table is there, it breaks the float and pushes the div under the other two, which is wrong. The table is not wider than the div. Here’s the HTML:
<html>
<head>
<title> Packard Carburetors </title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 id="banner">Packard Carburetors</h1>
</div><!--Header-->
<div id="navbar" class="green">
<ul id="navigation">
<li>HOME</li>
<li>PACKARD
<ul class="sub-nav">
<li>-1930 Speedster</li>
<li>-1929-31 Super 8</li>
<li>-Late 1931-32 Super 8</li>
<li>-1929-31 Standard 8</li>
<li>-Late 1931-32 Standard 8</li>
<li>-Rare Parts</li>
<li class="last">-745 Parts</li>
</ul>
</li>
<li>CADILLAC
<ul class="sub-nav">
<li>-1932-33 V12 & V16</li>
<li class="last">-1934-1937 V12 & V16</li>
</ul>
</li>
<li>SHOPPING CART</li>
<li>CHECK OUT</li>
<li>CONTACT US</li>
</ul><!--Navigation-->
<img id="#navbar-logo" src="img/logo.png">
<p id="nav-phone" class="black center bold">775.842.4282</p>
<p class="black center nav-small bold">packardcarbs@gmail.com</p>
<p class="black center nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->
<div id="content">
<h1 class="home-banner green center bold">All Packard Carburetors 1929-'32</h1>
<h2 class="home-banner green center bold">1930 Speedster <span class="black">|</span> 1929-32 Super 8 <span class="black">|</span> 1929-32 Standard 8</h2>
<hr>
<h1 class="home-banner green center bold">Cadillac Carburetors</h1>
<h2 class="home-banner green center bold">1932 - 1937 V-12 & V-16</h2>
<img id="detroit-lubricator" src="img./detroit-lubricator.png">
<div id="middle-column">
<ul id="feature-list-home">
<li>Silicone Bronze Investment Casting</li>
<li>Precision CNC Brass Machine Parts</li>
<li>Viton-Tipped Needles</li>
<li>Current Design
<ul id="sub-feature-list-home">
<li>-Needle Seats</li>
<li>-Pressure Valves</li>
</ul>
</li>
<li>Authentic Polished Brass Components</li>
<li>Gasoline and Ethanol Proof Exterior Coating</li>
<li>Exact Size as Original</li>
</ul>
<img id="middle-bar-spacer" src="img/divider-bar.png">
<div id="box-and-copy">
<img id="boxes" src="img/packard-boxes.png">
<p class="bold">All Components In-Stock!</p>
<p>Your Carburetor will be professionally assembled, engine tested and shipped quickly worldwide.</p>
</div><!-- Box and copy -->
</div><!--Middle Column -->
<div id="right-column">
<table>
<tr>
<td><img src="img/carb-1.png"></td>
<td><img src="img/carb-1.png"></td>
</tr>
<tr>
<td>1930 Speedster</td>
<td>1929-1931 Super 8</td>
</tr>
<tr>
<td><img src="img/carb-3.png"></td>
<td><img src="img/carb-4.png"></td>
</tr>
<tr>
<td>1932 Super 8</td>
<td>1929-1931 Standard 8</td>
</tr>
</table>
</div> <!--Right Column-->
</div><!--Content-->
</div><!--Wrapper-->
</body>
</html>
And the CSS:
/*General styles*/
.wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
background-image: url('../img/body-bg.png');
background-repeat: repeat-y;
overflow: auto;
}
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
#content {
float: left;
width: 700px;
padding: 10px 0px 0px 20px;
}
#banner {
display: inline-block;
text-indent: -9999px;
width: 940px;
height: 201;
background-image: url('../img/banner.png');
}
/* Nav Stuff */
#navbar {
width: 190px;
font-weight: bold;
font-size: 1.33em;
padding: 20px 20px 0px 10px;
float: left;
}
#navigation li {
padding-bottom: 20px;
}
.sub-nav{
font-size: .87em;
padding-top: 20px;
padding-left: 2.5em;
}
#navigation li ul.sub-nav li.last {
padding-bottom: 0px;
}
#nav-phone {
font-size: 1.19em;
padding-top: 15px;
}
.nav-small {
font-size: .75em;
padding-top: 5px;
}
/* Middle Column */
#middle-column{
width: 220px;
padding-right: 20px;
margin-top: 40px;
border-right: 2px solid #000000;
}
#feature-list-home {
list-style-image: url('../img/bullet.png');
font-size: 1.17em;
padding-left: 20px;
font-weight: bold;
padding-bottom: 40px;
}
#feature-list-home li {
padding-bottom: 20px;
}
#sub-feature-list-home {
padding-left: 10px;
}
#sub-feature-list-home li {
padding-bottom: 0px;
}
#middle-bar-spacer {
padding-bottom: 20px;
}
#boxes {
padding-bottom: 10px;
}
#box-and-copy {
font-size: 1.33em;
line-height: 1.5em;
text-align: center;
}
/* Home Page Right Column */
#right-column {
float: left;
width: 460px;
overflow: hidden;
}
/* Home Content Banner Stuff */
.home-banner {
line-height: 1.25em;
}
#detroit-lubricator {
margin-top: 10px;
}
/* OOCSS properties */
.green{
color: #117041;
}
.black{
color: #000000;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
1 Answer