Removing elements in layout breaks layout

younxta

New Member
When I remove the commented sections from the following code, it breaks the whole layout. This is bizarre, since the div and table that get commented out shouldn't affect the layout as a whole. Why is this happening?\[code\]<html><head><title> Packard Carburetors </title><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/12273984/css/reset.css" /><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/12273984/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="http://stackoverflow.com/questions/12273984/img/logo.png"> <p id="nav-phone" class="black center bold">775.842.4282</p> <p class="black center nav-small bold">[email protected]</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="http://stackoverflow.com/questions/12273984/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="http://stackoverflow.com/questions/12273984/img/divider-bar.png"> <div id="box-and-copy"> <img id="boxes" src="http://stackoverflow.com/questions/12273984/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="http://stackoverflow.com/questions/12273984/img/carb-1.png"></td> <td><img src="http://stackoverflow.com/questions/12273984/img/carb-1.png"></td> </tr> <tr> <td>1930 Speedster</td> <td>1929-1931 Super 8</td> </tr> <tr> <td><img src="http://stackoverflow.com/questions/12273984/img/carb-3.png"></td> <td><img src="http://stackoverflow.com/questions/12273984/img/carb-4.png"></td> </tr> <tr> <td>1932 Super 8</td> <td>1929-1931 Standard 8</td> </tr> <tr> <td><img src="http://stackoverflow.com/questions/12273984/img/box.png"></td> <td><img src="http://stackoverflow.com/questions/12273984/img/carb-5.png"></td> </tr> <tr> <td></td> <td>1932 Standard 8</td> </tr> </table>--> </div> <!--Right Column--> <div class="clear"></div> <img class="bottom-spacer" src="http://stackoverflow.com/questions/12273984/img/spacer-bottom.png"></div><!--Content--></div><!--Wrapper--></body></html>\[/code\]CSS:\[code\]/*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');}.clear { clear: both;}/* 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; float: left; 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: 420px; padding-left: 30px; padding-top: 20px; overflow: hidden;}#right-column table { text-align: center; font-weight: bold; line-height: 3em;}#right-column table td { width:210px;}/* Home Content Banner Stuff */.home-banner { line-height: 1.25em;}#detroit-lubricator { margin-top: 10px;}/* Footer */.bottom-spacer { padding-bottom: 50px;}/* OOCSS properties */.green{ color: #117041;}.black{ color: #000000;}.center { text-align: center;}.bold { font-weight: bold;}\[/code\]
 
Back
Top