PDA

View Full Version : New, need some help with floats (I think)



zach.e
Sep 20th, 2011, 05:49 PM
Hi so I'm new to this forum, and I have been trying to fix this for a long time now... alright so in the picture is a screenshot of what I am working on (it is a zoomed out view so I could fit the whole screen, the form normally isn't that wide). What I am trying to do is have the bottom table directly under the text (so they are both to the left of the form) I have tried everything I could think of and just cannot get it to work... Please help!

http://www.allny.com/blogs/todo/wp-content/uploads/2011/09/ss1.jpg

and here is some the the html and css... if you need more, let me know...

HTML


<div class="info">
<!-- heading info block -->
<div class="heading">
<h2>Sales Contracts</h2>
</div>
<!-- holder -->
<div class="holder">
<div class="frame">
<!-- specification list -->
<dl class="contact-list">
<strong>
<dt><font color="#ff6200">EUROPE, ASIA, LATIN AMERICA AND ELSEWHERE:</font></dt>
<dd>&nbsp;</dd>
<dd>East Metals AG</dd>
<dd>Baarerstrasse 131</dd>
<dd>6300 Zug</dd>
<dd>Switzerland</dd>
<dd>Telephone: +41 (0)41 560 9797</dd>
<dd>Fax: +41 (0)41 560 9720</dd>
<dd>&nbsp;</dd>
</strong>
</dl>
<dl class="contact-list-usa">
<strong>
<dt><font color="#ff6200">UNITED STATES, CANADA, AND MEXICO:</font></dt>
<dd>&nbsp;</dd>
<dd>East Metals (North America), LLC</dd>
<dd>1180 Omega Drive</dd>
<dd>Pittsburgh, PA 15205-5005, U.S.A.</dd>
<dd>Telephone: +1 412 787 4711</dd>
<dd>Toll-Free: +1 866 876 6285</dd>
<dd>Fax: +1 412 787 4703</dd>
<dd>&nbsp;</dd>
<dt><a href="http://www.nitrovan.com" target="_blank">www.nitrovan.com</a>&nbsp;<font color="#7e7e7e">|</font>&nbsp;<a href="http://www.evraz.com" target="_blank">www.evraz.com</a></dt>
</strong>
</dl>
</div>
</div>
</div>

CSS:


/* info */
.info {
width:441px;
background:url(../images/bg-info.gif) repeat-y;
margin:0 59px 0 0;
float:left;
}
.info .holder {
background:url(../images/bg-info.gif) no-repeat -442px 100%;
padding:0 16px 0 13px;
}
/* info heading */
.info .heading {
padding:8px 16px 0 16px;
background:#f7431e url(../images/bg-heading02.jpg) no-repeat;
height:31px;
overflow:hidden;
color:#fff;
}
.info .heading h2 {
margin:0;
font:20px/23px Arial, Helvetica, sans-serif;
}
.info .frame {
background:url(../images/bg-info-c.gif) no-repeat;
min-height:180px;
padding:7px 0 26px;
}
* html .info .frame {
height:180px;
overflow:visible;
}

Thanks again!

teedoff
Sep 20th, 2011, 06:15 PM
A link to your site would really help. But just looking at the image, are you sure you have enough room for that lower form to "move" up under the text?

zach.e
Sep 20th, 2011, 06:30 PM
Yup, even when I reduce the width to 20px it still stays there, and unfortunately the website is not online yet... here is a screenshot not zoomed in (looks the same in ff ie and chrome), and I also attached all of the code for both css and the page:

http://www.allny.com/blogs/todo/wp-content/uploads/2011/09/ss2.jpg


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Evraz</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<script type="text/javascript" src="js/main.js"></script>
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- header -->
<div id="header">
<!-- header-holder -->
<div class="header-holder">
<!-- logotype -->
<h1 class="logo"><a href="index.html">Evraz</a></h1>
<!-- slogan -->
<strong class="slogan">making the world stronger</strong>
</div>
<!-- header container -->
<div class="container">
<!-- navigation -->
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="why-us.html">Why Buy From Us</a></li>
<li><a href="nitrovan.html">Nitrovan<sup>&reg;</sup> Vanadium</a></li>
<li><a href="ferrovanadium.html">Ferrovanadium</a></li>
<li class="active"><a href="contact.html">Contact Us</a></li>
</ul>
<!-- search form (currently inactive)
<form action="#" class="search-form">
<fieldset>
<input type="text" class="search-input" value="search" />
<input type="submit" class="btn-search" value="search" />
</fieldset> -->
</form>
</div>
</div>
<!-- content -->
<div id="content">
<!-- title -->
<div class="title">
<!-- visual -->
<ul class="visual-why">
<li><img src="images/contact-banner.jpg" alt="image description" width="940" height="69" /></li>
</ul>
</div>
<!-- article -->
<div class="article-contact">
<div class="wrap">
<!-- contact form -->
<table class="alignright">
<tr>
<th align="left"><h1><font color="#f72e1e">Get in touch with us!</font></h1></th>
</tr>
<tr>
<th align="left">(<font color="#f72e1e">*</font>) Means that the field is mandatory.</th>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<th align="left">
<form>
<table class="contact-form">
<tr>
<td>First Name:</td>
<td><input type="text" name="first-name" size="33" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="last-name" size="33" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" size="33" /></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email" size="33" /></td>
</tr>
<tr>
<td>Company Name:</td>
<td><input type="text" name="company" size="33" /></td>
<tr>
<td>Job Title:</td>
<td><input type="text" name="title" size="33" /></td>
</tr>
<tr>
<td>Address 1:</td>
<td><input type="text" name="address1" size="33" /></td>
<tr>
<td>Address 2:</td>
<td><input type="text" name="address2" size="33" /></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country" size="1">
<option value=" " selected>--Please Select--</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="YU">Yugoslavia</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" size="33" /></td>
</tr>
<tr>
<td>State/Providence:</td>
<td>
<select name="state" size="1">
<option value="--">--Please Select--</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</td>
</tr>
<tr>
<td>Zip/Postal:</td>
<td><input type="text" name="zip" size="33" /></td>
</tr>
<tr>
<td>How did you hear about Evraz East Metals?</td>
<td>
<select name="hearaboutus" size="1">
<option value="--">--Please Select--</option>
<option value="internet">Internet</option>
<option value="tv">Television</option>
<option value="radio">Radio</option>
<option value="print">Print</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td>What do you want to know about?</td>
<td>
<select name="subject" size="1" width="33">
<option value="--">--Please Select--</option>
<option value="nitrovan">Nitrovan<sup>&reg;</sup> Vanadium</option>
<option value="ferrovanadium">Ferrovanadium</option>
<option value="company">Our Company</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">Your comments or message:</td>
</tr>
<tr>
<td colspan="2"><textarea name="comments" cols=79 rows=6></textarea></td>
</tr>
<tr align="right">
<td colspan="2"><input type="submit" value="SUBMIT" /></td>
</tr>
</table>
</form>
</th>
</tr>
</table>
<!-- article text -->
<div class="text-contact">
<p><font size="4"><strong>Would you like to learn about Evraz East Metals or discuss a business opportunity? Do you have an inquiry regarding our products? We'd love to talk to you further to showcase our expertise.</strong></font></p>
</div>
</div>
<div class="info">
<!-- heading info block -->
<div class="heading">
<h2>Sales Contracts</h2>
</div>
<!-- holder -->
<div class="holder">
<div class="frame">
<!-- specification list -->
<dl class="contact-list">
<strong>
<dt><font color="#ff6200">EUROPE, ASIA, LATIN AMERICA AND ELSEWHERE:</font></dt>
<dd>&nbsp;</dd>
<dd>East Metals AG</dd>
<dd>Baarerstrasse 131</dd>
<dd>6300 Zug</dd>
<dd>Switzerland</dd>
<dd>Telephone: +41 (0)41 560 9797</dd>
<dd>Fax: +41 (0)41 560 9720</dd>
<dd>&nbsp;</dd>
</strong>
</dl>
<dl class="contact-list-usa">
<strong>
<dt><font color="#ff6200">UNITED STATES, CANADA, AND MEXICO:</font></dt>
<dd>&nbsp;</dd>
<dd>East Metals (North America), LLC</dd>
<dd>1180 Omega Drive</dd>
<dd>Pittsburgh, PA 15205-5005, U.S.A.</dd>
<dd>Telephone: +1 412 787 4711</dd>
<dd>Toll-Free: +1 866 876 6285</dd>
<dd>Fax: +1 412 787 4703</dd>
<dd>&nbsp;</dd>
<dt><a href="http://www.nitrovan.com" target="_blank">www.nitrovan.com</a>&nbsp;<font color="#7e7e7e">|</font>&nbsp;<a href="http://www.evraz.com" target="_blank">www.evraz.com</a></dt>
</strong>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<!-- footer holder -->
<div class="footer-holder">
<!-- footer navigation -->
<ul class="footer-nav">
<li><a href="site-map.html">Site Map </a></li>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="mailto:[email protected]">E-Mail Us</a></li>
<li><a href="terms.html">Terms &amp; Conditions</a></li>
</ul>
<p>The Evraz East Metals logo is a registered trademark of the Evraz Group S.A. "Nitrovan" is a registered trademark of Stratcor, Inc., Part of the Evraz Group S.A.</p>
<p>&copy; 2011 East Metals AG. All rights reserved, as described in the web site’s Terms and conditions.</p>
</div>
</div>
</body>
</html>

zach.e
Sep 20th, 2011, 06:30 PM
and the css...



/* body */
body {
margin:0;
color:#7e7e7e;
font:normal 12px/18px Arial, Helvetica, sans-serif;
background:#fff url(../images/bg-page01.gif) repeat-x;
min-width:960px;
}
img {border-style:none;}
a {
text-decoration:none;
color:#ff6200;
}
a:hover {text-decoration:underline;}
input,
textarea,
select {
font:100% Arial, Helvetica, sans-serif;
vertical-align:middle;
color:#000;
}
form, fieldset {
margin:0;
padding:0;
border-style:none;
}
sup {
display:inline-block;
margin-top:-7px;
}
* html sup{margin-top:-3px;}
* + html sup{margin-top:-7px;}
/* wrapper */
#wrapper {
width:940px;
margin:0 auto;
padding:0 10px;
background:url(../images/bg-page02.gif) no-repeat 99% 0;
}
/* header */
#header {
height:1%;
padding:35px 0 17px;
}
#header:after {
display:block;
content:"";
clear:both;
}
/* header holder */
.header-holder {
overflow:hidden;
height:1%;
margin:0 0 18px;
}
/* logotype */
.logo {
width:286px;
height:28px;
background:url(../images/logo.gif);
text-indent:-9999px;
overflow:hidden;
margin:0;
float:left;
}
.logo a{
display:block;
height:100%;
}
/* slogan */
.slogan {
float:right;
color:#f72e1e;
font:26px/29px Arial, Helvetica, sans-serif;
margin:6px 10px 0 0;
}
/* header container */
#header .container {
height:1%;
border-bottom:1px solid #f68b1f;
}
#header .container:after {
display:block;
content:"";
clear:both;
}
/* navigation */
#nav {
margin:0;
padding:4px 0 0;
list-style:none;
overflow:hidden;
float:left;
}
#nav li {
float:left;
margin:0 24px 0 0;
}
#nav a {
color:#757575;
padding:0 9px 1px;
display:block;
border-bottom:7px solid #fff;
}
#nav a:hover {
text-decoration:none;
border-bottom:7px solid #f72e1e;
color:#f72e1e;
}
#nav .active a{
border-bottom:7px solid #f72e1e;
color:#f72e1e;
}
/* search form */
.search-form {
float:right;
background:url(../images/bg-search.gif) no-repeat;
overflow:hidden;
height:26px;
width:193px;
padding:0 0 0 9px;
margin:0 -2px 0 0;
display:inline;
position:relative;
}
.search-input {
float:left;
background:none;
color:#777;
border:0;
width:163px;
padding:5px 0;
margin:0 7px 0 0;
outline:none;
}
.search-input.focus {color:#ff3d00;}
.btn-search {
float:left;
width:20px;
height:27px;
background:url(../images/btn-search.gif) no-repeat 0 2px;
margin:0;
padding:0;
border:0;
cursor:pointer;
overflow:hidden;
text-indent:-9999px;
font-size:0;
line-height:0;
}
.btn-search:hover {background-position:0 -39px;}
/* content */
#content {
border-bottom:2px solid #edecec;
padding:0 0 21px;
}
/* intro */
.intro {
overflow:hidden;
height:1%;
margin:0 0 19px;
position:relative;
}
.intro img {display:block;}
/* intro text */
.intro-text {
position:absolute;
bottom:0;
right:0;
background:#ff3d00;
padding:15px 0 20px 20px;
color:#fefefe;
width:440px
}
.intro-text h2 {
font:32px/38px Arial, Helvetica, sans-serif;
margin:0;
}
/* twocolumns */
.twocolumns {
width:948px;
background:url(../images/bg-twocolumns.gif) repeat-y;
margin:0 -2px 0 -4px;
overflow:hidden;
}
.twocolumns .holder {
background:url(../images/bg-twocolumns.gif) no-repeat -949px 100%;
overflow:hidden;
width:967px;
}
/* column */
.twocolumns .column {
width:415px;
float:left;
padding:0 34px 17px 16px;
margin:0 18px 0 0;
}
/* column heading */
.twocolumns .heading {
padding:7px 34px 0 16px;
margin:0 -34px 9px -16px;
background:#f7431e url(../images/bg-heading.jpg) no-repeat;
height:31px;
overflow:hidden;
}
.twocolumns .heading h2 {
margin:0;
color:#fff;
font:20px/24px Tahoma, Geneva, sans-serif;
}
.heading sup {font-size:12px;}
* html .heading sup {
margin-top:-7px;
vertical-align:top;
}
* + html .heading sup {
margin-top:-7px;
vertical-align:top;
}
/* alignleft */
.column .alignleft {
float:left;
margin:2px 17px 0 0;
}
/* alignright */
.column .alignright {
float:right;
margin:2px 0 0 17px;
}
.twocolumns .column h3 {
margin:0 0 5px;
font:bold 13px/16px Tahoma, Geneva, sans-serif;
color:#666565;
}
.twocolumns .column p {margin:0 0 7px;}
.twocolumns .link-holder {text-align:right;}
/* mark */
.mark {
color:#f72e1e;
font-weight:bold;
}
/* more */
.more {color:#f68b1f;}
.twocolumns .text {
overflow:hidden;
height:1%;
}
.twocolumns .wrap {
overflow:hidden;
height:1%;
}
/* title */
.title {
overflow:hidden;
height:1%;
background:#f72e1e;
border-right:1px solid #2d2d2d;
color:#fff;
font:19px/23px Arial, Helvetica, sans-serif;
padding:5px 0 0 21px;
margin:0 0 19px;
}
.title sup {font-size:12px;}
* html .title sup {
margin-top:-8px;
vertical-align:top;
}
* + html .title sup {
margin-top:-7px;
vertical-align:top;
}
.title {
overflow:hidden;
height:1%;
background:#f72e1e;
border-right:1px solid #2d2d2d;
color:#fff;
font:19px/23px Arial, Helvetica, sans-serif;
padding:5px 0 0 21px;
margin:0 0 19px;
}
.title sup {font-size:12px;}
* html .title sup {
margin-top:-8px;
vertical-align:top;
}
* + html .title sup {
margin-top:-7px;
vertical-align:top;
}
/* visual */
.visual {
float:right;
overflow:hidden;
width:554px;
border-left:1px solid #2d2d2d;
margin:-5px 0 0;
padding:0;
list-style:none;
height:69px;
}
.visual li {float:left;}
.visual img {display:block;}
.title h2 {
margin:0 0 3px;
font:26px/32px Arial, Helvetica, sans-serif;
}
.title p {margin:0;}
.visual-why {
float:right;
overflow:hidden;
width:940px;
border-left:1px solid #2d2d2d;
margin:-5px 0 0;
padding:0;
list-style:none;
height:69px;
}
.visual-why li {float:left;}
.visual-why img {display:block;}
.visual-terms {
float:right;
overflow:hidden;
width:940px;
border-left:1px solid #2d2d2d;
margin:-5px 0 0;
padding:0;
list-style:none;
height:69px;
}
.visual-terms li {float:left;}
.visual-terms img {display:block;}
.title h2 {
margin:0 0 3px;
font:26px/32px Arial, Helvetica, sans-serif;
}
.title p {margin:0;}
/* article */
.article {
height:1%;
padding:0 61px 31px 0;
margin:0 0 21px;
border-bottom:1px solid #f68b1f;
position:relative;
}
.article .wrap {height:1%;}
.article .wrap:after,
.article:after {
display:block;
content:"";
clear:both;
}
.article-f {
height:1%;
padding:0 150px 5px 0;
margin:0 0 21px;
border-bottom:1px solid #f68b1f;
position:relative;
}
.article-f .wrap {height:1%;}
.article-f .wrap:after,
.article-f:after {
display:block;
content:"";
clear:both;
}
.article-why {
height:1%;
padding:0 0 0 0;
margin:0 0 21px;
border-bottom:1px solid #ffffff;
position:relative;
}
.article-why .wrap {height:1%;}
.article-why .wrap:after,
.article-why:after {
display:block;
content:"";
clear:both;
}
.article-terms {
height:1%;
padding:0 475px 5px 0;
margin:0 0 21px;
position:relative;
}
.article-terms .wrap {height:1%;}
.article-terms .wrap:after,
.article-terms:after {
display:block;
content:"";
clear:both;
}
.article-contact {
height:1%;
padding:0 0 31px 0;
margin:0 0 21px;
border-bottom:1px solid #f68b1f;
position:relative;
}
.article-contact .wrap {height:1%;}
.article-contact .wrap:after,
.article-contact:after {
display:block;
content:"";
clear:both;
}
/* article image*/
.article .alignright {
float:right;
margin:-9px 0 0 70px;
position:relative;
}
.article-f .alignright {
float:right;
margin:-9px 0 0 70px;
position:relative;
}
.article-why .alignright {
float:right;
margin:-9px 0 0 30px;
position:relative;
}
.article-terms .alignright {
float:right;
margin:-9px 0 0 70px;
position:relative;
}
.article-contact .alignright {
float:right;
margin:-9px 0 0 70px;
position:relative;
}
/* article text */
.article .text {
overflow:hidden;
height:1%;
padding: 0 0 81px;
}
.article p {margin:0 0 18px;}
.table {width:100%;}
.table:after {
display:block;
content:"";
clear:both;
}
.article-f .text {
overflow:hidden;
height:1%;
padding: 0 0 0px;
}
.article-f p {margin:0 0 18px;}
.table-f {width:100%;}
.table-f:after {
display:block;
content:"";
clear:both;
}
.article-why .text {
overflow:hidden;
height:1%;
padding: 0 0 0 0;
}
.article-terms .text-terms {
overflow:hidden;
height:1%;
padding: 0 0 0 0;
border-bottom:1px solid #f68b1f;
}
.article-why p {margin:0 0 18px;}
.table-why {width:100%;}
.table-why:after {
display:block;
content:"";
clear:both;
}
.article-terms .text {
overflow:hidden;
height:1%;
padding: 0 0 0px;
}
.article-terms p {margin:0 0 18px;}
.table-terms {width:100%;}
.table-terms:after {
display:block;
content:"";
clear:both;
}
.article-contact .text-contact {
overflow:hidden;
height:1%;
padding: 0 0 35px;
border-bottom:1px solid #f68b1f;
}
.article-contact p {margin:0 0 18px;}
.table-contact {width:100%;}
.table-contact:after {
display:block;
content:"";
clear:both;
}
/* description table */
.description-table {
border-collapse:collapse;
padding:0;
border-left:1px solid #ee2e24;
width:766px;
margin:-81px 0 0 2px;
position:relative;
z-index:10;
float:left;
}
.description-table th {
padding:0;
background:#ee2e24;
height:28px;
text-transform:uppercase;
color:#fff;
font-size:14px;
}
.description-table td {
padding:0;
height:27px;
border-width:0 1px 1px 0;
border-style:solid;
border-color:#ee2e24;
text-align:center;
background:url(../images/bg-table.png);
color:#231f20;
font-weight:bold;
}
* html .description-table td {height:26px;}
* + html .description-table td {height:26px;}
.grade {width:184px;}
.vanadium,
.nitrogen,
.silicon,
.sulfur,
.carbon,
.aluminum {width:144px;}
.aluminum {border-right:1px solid #ee2e24;}
#content .container {
overflow:hidden;
height:1%;
background:url(../images/devider.gif) no-repeat 50% 0;
padding:0 0 3px;
}
.description-table-f {
border-collapse:collapse;
padding:0;
border-left:1px solid #ee2e24;
width:850px;
margin:-110px 0 0 2px;
position:relative;
z-index:10;
float:left;
}
.description-table-f th {
padding:0;
background:#ee2e24;
height:28px;
text-transform:uppercase;
color:#fff;
font-size:14px;
}
.description-table-f td {
padding:0;
height:27px;
border-width:0 1px 1px 0;
border-style:solid;
border-color:#ee2e24;
text-align:center;
background:url(../images/bg-table.png);
color:#231f20;
font-weight:bold;
}
* html .description-table-f td {height:26px;}
* + html .description-table-f td {height:26px;}
.grade {width:184px;}
.vanadium,
.nitrogen,
.silicon,
.phosphorus,
.sulfur,
.carbon,
.aluminum {width:144px;}
.aluminum {border-right:1px solid #ee2e24;}
#content .container {
overflow:hidden;
height:1%;
background:url(../images/devider.gif) no-repeat 50% 0;
padding:0 0 3px;
}
/* info */
.info {
width:441px;
background:url(../images/bg-info.gif) repeat-y;
margin:0 59px 0 0;
float:left;
}
.info .holder {
background:url(../images/bg-info.gif) no-repeat -442px 100%;
padding:0 16px 0 13px;
}
/* info heading */
.info .heading {
padding:8px 16px 0 16px;
background:#f7431e url(../images/bg-heading02.jpg) no-repeat;
height:31px;
overflow:hidden;
color:#fff;
}
.info .heading h2 {
margin:0;
font:20px/23px Arial, Helvetica, sans-serif;
}
.info .frame {
background:url(../images/bg-info-c.gif) no-repeat;
min-height:180px;
padding:7px 0 26px;
}
* html .info .frame {
height:180px;
overflow:visible;
}
/* specifications list */
.specifications-list {
margin:0;
padding:0 47px 0 50px;
background:url(../images/arrow.gif) no-repeat 7px 5px;
color:#757575;
font-size:13px;
}
.specifications-list ul {
list-style-type: disc;
list-style-image: url(../images/bullet-simple.jpg);
}
.specifications-list dt {
margin:0;
color:#f72e1e;
}
.specifications-list dd {margin:0 0 4px;}
/* contact list */
.contact-list {
margin:0;
padding:0 47px 0 50px;
background:url(../images/contact-swiss.png) no-repeat 7px 5px;
color:#757575;
font-size:13px;
}
.contact-list ul {
list-style-type: disc;
list-style-image: url(../images/bullet-simple.jpg);
}
.contact-list dt {
margin:0;
color:#f72e1e;
}
.contact-list dd {margin:0 0 4px;}
.contact-list-usa {
margin:0;
padding:0 47px 0 50px;
background:url(../images/contact-usa.png) no-repeat 7px 5px;
color:#757575;
font-size:13px;
}
.contact-list-usa ul {
list-style-type: disc;
list-style-image: url(../images/bullet-simple.jpg);
}
.contact-list-usa dt {
margin:0;
color:#f72e1e;
}
.contact-list-usa dd {margin:0 0 4px;}
/* list */
.list {
width:400px;
margin:0;
padding:9px 0 0;
list-style:none;
color:#757575;
float:left;
font:bold 14px/18px Arial, Helvetica, sans-serif;
}
.list li {
background:url(../images/bullet.gif) no-repeat 0 2px;
padding:0 0 13px 33px;
vertical-align:top;
height:1%;
}
.list sup {font-size:12px;}
* html .list sup {
margin-top:-5px;
vertical-align:top;
}
* + html .list sup {
margin-top:-5px;
vertical-align:top;
}
/* form */
.contact-form select {
width:200px;
}
/* footer */
#footer {
width:100%;
border-bottom:22px solid #edecec;
}
/* footer holder */
.footer-holder {
text-align:center;
padding:7px 0;
width:960px;
margin:0 auto;
color:#979797;
font:11px/13px Arial, Helvetica, sans-serif;
overflow:hidden;
}
#footer p {margin:0;}
/* footer navigation */
.footer-nav {
display:inline;
margin:0;
padding:0;
list-style:none;
line-height:18px;
}
.footer-nav li {
display:inline;
background:url(../images/separator.gif) no-repeat 0 3px;
padding:0 0 0 10px;
margin:0 6px 0 0;
}
.footer-nav li:first-child {background:none;}
.footer-nav a {color:#979797;}

teedoff
Sep 20th, 2011, 06:41 PM
Move your info div and all its content INSIDE your wrap div below the text-content div in the code.

Then remove the float: left on the info div.

zach.e
Sep 20th, 2011, 07:07 PM
ahh thank you so much! worst part is I swear I tried that I just forgot to remove the float for the new tags... thanks again!

teedoff
Sep 20th, 2011, 07:18 PM
ahh thank you so much! worst part is I swear I tried that I just forgot to remove the float for the new tags... thanks again!

Yeah, without removing that float it doesnt work.

If you dont already, you should download and learn to use firebug. Its free for firefox and is awesome for debugging issues like this.