1 reply [Last post]
thra1l
thra1l's picture
Offline
newbie
Kentukcy
Last seen: 2 years 29 weeks ago
Kentukcy
Timezone: GMT-5
Joined: 2012-02-08
Posts: 1
Points: 2

I am working on a website: ( www.kentuckymustangautosales.com ) and the website is going fine, until I figured out that it completely messes up when minimized in any browser. I'll post my html and css code. Any help would be very much appreciated. Thanks.

My HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Kentucky Mustang Auto Sales</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/coin-slider.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="../galleria/galleria-1.2.6.min.js"></script>
<link rel="stylesheet" href="../styles/coin-slider-styles.css" type="text/css" />
<link rel="stylesheet" href="../styles/style.css" type="text/css" />
 
 
<style type="text/css">
div.topnav
{
margin-right:auto;
width:85%;
}
img.logo
{
display:
block;
margin-left:auto;
margin-right:auto;
margin-top:10px
}
div.phone
{
	margin-left:auto;
	width: 58%
}
div.cartitle
{
	font:Georgia, "Times New Roman", Times, serif;
	font-size: 28px;
}
div.specs
{
	border: 0px;
}
div.phone
{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 
}
a:link {
COLOR: #ffffff;
text-decoration: underline;
}
a:visited {
COLOR: #00F;
text-decoration: underline;
}
a:hover {
COLOR: #00F;
text-decoration: none;
}
a:active {
COLOR: #00F;
text-decoration: none;
}
</style>
 
 
 
 
<link rel="stylesheet" href="../styles/layout.css" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body id="top">
<!-- SLIDE OUT NAVIGATION START -->
    <ul id="navigation">
 <li class="facebook"><a href="https://www.facebook.com/kentuckymustang"><span>Facebook</span></a></li>
 <li class="youtube"><a href="http://www.youtube.com/user/KentuckyMustang"><span>Youtube</span></a></li>
</ul>
 
 
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>
 
<!-- SLIDE OUT NAVIGATION END -->
<div class="wrapper col2">
  <div id="header">
 
     <a href="../index.php"><img class="logo" src="../images/Sign.png" alt="Home Page" width="600" height="181" align="left" /></a> 
     <div id="phone">  
     <p>Phone: (859) 498-7570 | Email: <a href="mailto:[email protected]">sales@kentuckymustang.com</a></p>
     </div>
    <div class="topnav">
        <ul id="topnav">
      <li class="last"><a href="#">KY Mustang Parts</a></li>
 
      <li><a href="#">About Us</a>
      </li>
 
      <li><a href="../full-width.html">Contact Us/Directions</a></li>
      <li><a href="../style-demo.html">Cars For Sale</a></li>
      <li style="border-left: 2px solid #272727;" class="active"><a href="../index.php">Home</a></li>
    </ul>
 
      <br class="clear" />
    </div>
</div>
</div>
<!-- TemplateBeginEditable name="Content" -->
<!-- BEGIN CAR TITLE -->
<div class="col3 cartitle">
  <center>
    Title of the Car
  </center>
</div>
<div class="wrapper col3">
  <!-- END CAR TITLE -->
  <!-- galleria begin -->
  <!-- Insert images and captions here for car -->
  <center>
    <div id='car'> <img src="../images/car1.jpg" /> <img src="../images/car2.jpg" /> <img src="../images/car3.jpg" /> </div>
    <script>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#car").galleria({
                width: 900,
                height: 500
            });
        </script>
  </center>
</div>
<!-- galleria end -->
<div class="wrapper col4"></div>
<div class="wrapper col5">
  <div id="container">
    <div id="content">
      <h2> Basic Overview</h2>
      <table summary="Car Specs" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th colspan="2">Basic Specs</th>
          </tr>
        </thead>
        <tbody>
          <tr class="light">
            <td width="50%">Exterior Color</td>
            <td width="50%">Value 2</td>
          </tr>
          <tr class="dark">
            <td>Interior Color</td>
            <td>Value 6</td>
          </tr>
          <tr class="light">
            <td>Body Style</td>
            <td>Value 10</td>
          </tr>
          <tr class="dark">
            <td>Engine Size</td>
            <td>Value 14</td>
          </tr>
          <tr class="light">
            <td>Transmission</td>
            <td>Value 10</td>
          </tr>
          <tr class="dark">
            <td>VIN#</td>
            <td>Value 14</td>
          </tr>
          <tr class="light">
            <td>Odometer</td>
            <td>Value 10</td>
          </tr>
          <tr class="dark">
            <td>Stock#</td>
            <td>Value 14</td>
          </tr>
        </tbody>
      </table>
      <br />
      <!-- DETAILED SPECS BEING -->
      <div id="detailed">
        <table width="210px" cellpadding="0" cellspacing="0" summary="Car Specs">
          <thead>
            <tr>
              <th colspan="2">Detailed Specs</th>
            </tr>
          </thead>
          <tbody>
            <tr class="light">
              <td colspan="2"><strong>
                <center>
                  Convenience
                </center>
              </strong></td>
            </tr>
            <tr class="dark">
              <td width="50%">Cruise Control</td>
              <td width="50%">Power Steering</td>
            </tr>
            <tr class="light">
              <td>Air conditioning</td>
              <td>Tilt Steering Wheel</td>
            </tr>
            <tr class="dark">
              <td>Remote Door Locks</td>
              <td>Power Seat(s)</td>
            </tr>
            <tr class="light">
              <td>Power Windows</td>
              <td>AM/FM Sterio</td>
            </tr>
            <tr class="dark">
              <td>Rear Defroster</td>
              <td>Power Mirrors</td>
            </tr>
            <tr class="light">
              <td>Mach Audio System</td>
              <td>&nbsp;</td>
            </tr>
            <tr class="dark">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr class="light">
              <td colspan="2"><strong>
                <center>
                  Safety Features
                </center>
              </strong></td>
            </tr>
            <tr class="dark">
              <td>ABS Brakes</td>
              <td>Driver/Passenger Air Bags</td>
            </tr>
            <tr class="light">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr class="dark">
              <td colspan="2"><strong>
                <center>
                  Exterior
                </center>
              </strong></td>
            </tr>
            <tr class="light">
              <td>Rear Spoiler</td>
              <td>Tinted Glass</td>
            </tr>
            <tr class="dark">
              <td>Hood Scoop</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- DETAILED SPECS END -->
    </div>
    <div id="column">
      <h2 class="title">Video</h2>
      <iframe width="420" height="315" src="http://www.youtube.com/embed/82Q4QCbkSDU" frameborder="1" allowfullscreen></iframe>
    </div>
    <br class="clear" />
    <br class="clear" />
  </div>
</div>
<!-- TemplateEndEditable -->
<div class="wrapper col6">
  <div id="footer">
    <div id="contactform">
      <h2> Contact Us</h2>
      <form action="#" method="post">
        <fieldset>
        <legend>Contact Form</legend>
        <label for="fullname">Name:
        <input id="fullname" name="fullname" type="text" value="" />
        </label>
        <label for="emailaddress" class="margin">Email:
        <input id="emailaddress" name="emailaddress" type="text" value="" />
        </label>
        <label for="message">Message:<br />
        <textarea id="message" name="message" cols="40" rows="4"></textarea>
        </label>
        <p>
          <input id="submitform" name="submitform" type="submit" value="Submit" />
          &nbsp;
          <input id="resetform" name="resetform" type="reset" value="Reset" />
        </p>
        </fieldset>
      </form>
    </div>
    <!-- End Contact Form -->
    <div id="compdetails">
      <div id="officialdetails">
        <h2>Company Information</h2>
        <ul>
          <li>Copyright &copy; 2012 - All Rights Reserved</li>
          <li>Kentucky Mustang Auto Sales</li>
        </ul>
 
      </div>
      <div id="contactdetails">
        <h2>Our Contact Details</h2>
        <ul>
          Kentucky Mustang Auto Sales
          <li></li>
          <li>985 Double Gate Road</li>
          <li>Jeffersonville, KY 40337</li>
          <li>Phone: (859) 498-7570</li>
          <li>Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%73%61%6c%65%73%40%6b%65%6e%74%75%63%6b%79%6d%75%73%74%61%6e%67%2e%63%6f%6d%22%3e%73%61%6c%65%73%40%6b%65%6e%74%75%63%6b%79%6d%75%73%74%61%6e%67%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></li>
          <li> YouTube: <a href="http://www.youtube.com/user/KentuckyMustang">Kentucky Mustang</a></li>
          <li class="last">Facebook: <a href="https://www.facebook.com/kentuckymustang">Kentucky Mustang</a>      </li>
 
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="wrapper col7">
  <div id="copyright">
    <ul>
      <li><a href="#">Online Privacy Policy</a></li>
      <li><a href="#">Terms of Use</a></li>
      <li><a href="#">Permissions &amp; Trademarks</a></li>
      <li><a href="#">Product License Agreements</a></li>
      <li class="last">Template by <a target="_blank" href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a></li>
    </ul>
  </div>
</div>
 
 
</body>
</html>

My CSS

/*
Template Name: PhotoBusiness
File: Layout CSS
Author: OS Templates
Author URI: <a href="http://www.os-templates.com/
Licence:" rel="nofollow">http://www.os-templates.com/
Licence:</a> <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>
*/
 
@import url(navi.css);
@import url(forms.css);
@import url(tables.css);
@import url(gallery.css);
 
body{
	margin:0;
	font-size:12px;
	font-family:verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	background-color:#2E2E2E;
	padding-top: 0px;
    padding-right: 100px;
    padding-bottom: 50px;
    padding-left: 100px; 
	}
 
img{border:0; padding:0; margin:0;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart {list-style-type:none; margin:0; padding:0;}
.clear{clear: both;}
br.clear{
	clear:both;
	margin-top:-15px;
	text-align: center;
}
a{outline:none; text-decoration:none;}
 
.fl_left{float:left;}
.fl_right{float:right;}
 
.imgl, .imgr{border:1px solid #666666; padding:5px;}
.imgl{float:left; margin:0 8px 8px 0; clear:left;}
.imgr{float:right; margin:0 0 8px 8px; clear:right;}
 
/* ----------------------------------------------Wrapper-------------------------------------*/
 
div.wrapper{
	position:relative;
	float:left;
	width:100%;
	margin:0;
	text-align:left;
	}
 
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
	margin:0 0 20px 0;
	padding:0 0 8px 0;
	font-size:22px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	border-bottom:1px dashed #DDDDDD;
	}
 
.col1{color:#333333; background-color:#000000;}
.col2{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
.col3{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
.col4{color:#DBDBDB; background-color:#000000; border-bottom:1px solid #3B3B3B;}
.col5{color:#CCCCCC; background-color:#000000; border-bottom:1px solid #3B3B3B;}
.col5 a{color:#99CC00; background-color:#000000;}
.col6{color:#FFFFFF; background-color:#1B1B1B; border-bottom:1px solid #3B3B3B;}
.col7, .col7 a{color:#CCCCCC; background-color:#2E2E2E;}
 
/* ----------------------------------------------Generalise-------------------------------------*/
 
#topbar, #header, #gallery, #cars, #breadcrumb, #container, #footer, #copyright{
	position:relative;
	margin:0 auto;
	display:block;
	width:960px;
	}
 
/* ----------------------------------------------TopBar-------------------------------------*/
 
#topbar{
	height:25px;
	padding:10px 0;
	}
 
/* ----------------------------------------------Header-------------------------------------*/
 
#header{
	padding:0 0 20px 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
 
#header #logo{
	display:block;
	float:left;
	width:300px;
	}
 
#header h1, #header p{
	margin:0;
	padding:0;
	border:none;
	clear:left;
	font-size:13px;
	text-align: left;
	}
 
#header h1{
	margin-bottom:5px;
	font-size:36px;
	}
 
#header h1 a{
	color:#DBDBDB;
	background-color:#000000;
	}
 
/* ----------------------------------------------Header-------------------------------------*/
 
#cars{
	padding:20px 0 0 0;
	text-transform:;
	font-size:16px;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
 
#cars img{
	margin:0;
	padding:0;
	line-height:normal;
	}
 
#cars ul{
	display:block;
	width:960px;
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;
	}
 
#cars li{
	display:block;
	float:left;
	width:234px;
	height:175px;
	margin:0 8px 8px 0;
	padding:0;
	overflow:hidden;
	}
 
#cars li.last{
	margin-right:0;
	}
 
#cars a strong{
	display:none;
	width:100%;
	margin:0;
	padding:7px 0;
	font-weight:normal;
	text-align:center;
	color:#5B5B5B;
	background-color:#232323;
	}
 
#cars a:hover strong{
	display:block;
	}
 
/* ----------------------------------------------BreadCrumb-------------------------------------*/
 
#breadcrumb{
	padding:15px 0;
	}
 
#breadcrumb a{color:#99CC00; background-color:#000000;}
 
#breadcrumb ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}
 
/* ----------------------------------------------Content-------------------------------------*/
 
#container{
	padding:15px 0;
	}
 
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	color:#CCCCCC;
	background-color:#000000;
	border-bottom:1px solid #CCCCCC;
	}
 
#content{
	display:block;
	float:left;
	width:600px;
	}
#body{
	width: 100%;
	height:100%;
}
/* ------Comments-----*/
 
#comments{margin-bottom:40px;}
 
#comments .commentlist {margin:0; padding:0;}
 
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
 
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
 
#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#3E7060; background-color:#F7F7F7;}
 
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#3E7060; background-color:#E8E8E8;}
 
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
 
#comments .commentlist p {margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
 
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
 
/* ----------------------------------------------Column-------------------------------------*/
 
#column{
	display:block;
	float:right;
	width:300px;
	}
 
.flickrbox ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
.flickrbox li{
	display:block;
	float:left;
	width:80px;
	height:80px;
	margin:0 15px 15px 0;
	padding:4px;
	border:1px solid #666666;
	}
 
.flickrbox li.last{margin-right:0;}
 
#column .holder, #column #featured{
	display:block;
	width:300px;
	margin-bottom:20px;
	}
 
#column .holder p{
	line-height:1.6em;
	}
 
#column h2{
	font-size:20px;
	}
 
#column .holder h2.title{
	display:block;
	width:100%;
	height:65px;
	margin:0;
	padding:15px 0 0 0;
	font-size:20px;
	line-height:normal;
	border-bottom:1px dashed #666666;
	}
 
#column .holder h2.title img{
	float:left;
	margin:-15px 8px 0 0;
	padding:5px;
	border:1px solid #666666;
	}
 
#column .holder p.readmore{
	display:block;
	width:100%;
	font-weight:bold;
	text-align:right;
	line-height:normal;
	}
 
#column div.imgholder{
	display:block;
	width:290px;
	margin:0 0 10px 0;
	padding:4px;
	border:1px solid #666666;
	}
 
/* Featured Block */
 
#column #featured a{
	color:#99CC00;
	background-color:#161616;
	}
 
#column #featured ul, #column #featured h2, #column #featured p{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#column #featured li{
	display:block;
	width:250px;
	margin:0;
	padding:20px 25px;
	color:#666666;
	background-color:#161616;
	}
 
#column #featured li p{
	line-height:1.6em;
	}
 
#column #featured li p.imgholder{
	display:block;
	width:240px;
	height:90px;
	margin:20px 0 15px 0;
	padding:4px;
	color:#666666;
	background-color:#333333;
	border:1px solid #666666;
	}
 
#column #featured li h2{
	margin:0;
	padding:0 0 14px 0;
	font-size:20px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#666666;
	background-color:#161616;
	line-height:normal;
	border-bottom:1px dashed #666666;
	}
 
#column #featured p.more{
	display:block;
	width:100%;
	margin-top:15px;
	font-weight:bold;
	text-align:right;
	line-height:normal;
	}
 
/* ----------------------------------------------Footer-------------------------------------*/
 
#footer{
	padding:20px 0;
	}
 
#footer a{
	color:#99CC00;
	background-color:#1B1B1B;
	}
 
#footer h2{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	font-size:22px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#CCCCCC;
	background-color:#1B1B1B;
	line-height:normal;
	border-bottom:1px dashed #CCCCCC;
	}
 
#contactform{
	display:block;
	float:left;
	width:350px;
	}
 
/* ------Company Details------*/
 
#compdetails{
	display:block;
	float:right;
	width:550px;
	}
 
#compdetails ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#compdetails li{
	margin:0 0 12px 0;
	}
 
#compdetails li.last{
	margin:0;
	}
 
#officialdetails{float:left}
#officialdetails li.last{margin-bottom:20px;}
 
#contactdetails{float:right}
 
/* ----------------------------------------------Copyright-------------------------------------*/
 
#copyright{
	padding:20px 0;
	text-align:right;
	}
 
#copyright ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#copyright li{
	display:inline;
	margin-right:8px;
	padding-right:10px;
	border-right:1px solid #CCCCCC;
	}
 
#copyright li.last{
	margin-right:0;
	padding-right:0;
	border-right:none;
	}
 

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 45 weeks 6 days ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

make it width of the body

make it width of the body section into pixel rate.