liquid layout css problem...could use a hand
evening...I am having an issue with a 3 column lquid layout (the left column being subdivided into 2 columns ... basic layout from Dynamic Drive... http://www.dynamicdrive.com/style/la...d-fluid-fixed/
For the most part all is good but I cannot seem to get the center/content row of columns outer borders to coincide with the wrapper and the header and footer borders. Off by a pixel on either side (both outer margins extend out a pixel too far into the outer box margin. This both in IE and Firefox.
I have tried everything I can think of and nothing is working for me. I could use some suggestions and another set of eyes on this.
thank you
Bob
page at: http://www.focusdesign.com/nhbr/templates/untitled.htm
Code:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NHBR_CSS (Fixed-Fluid-Fixed)</title>
<script
language="JavaScript" src="equalcolumns.js" type="text/javascript"></script>
<link rel="stylesheet" href="businessreview.css" type="text/css" />
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: #fff url(../images/background2.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 10px;
padding: 0;
text-align: center;
min-width: 550px; /* 2x LC width + RC width */
}
#maincontainer {
background: white;
}
#maincontainer .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#maincontainer
{
width: 99.8%;
border-color: #333333;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-width: 1px 1px 1px 1px;
padding: 0;
margin: 0;
}
#topsection
{
background: #EAEAEA;
background: url(../images/25001header.gif);
border-color: #333333;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-width: 1px 1px 0 1px;
height: 75px;
width: 100%;
}
#topsection h1
{
border-color: #333333;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
margin: 0;
padding-top: 15px;
}
#horizontnav
{
background: repeat-x
url(../images/tabs/back_row_top.gif);
border-color: #333333;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
height: 33px;
overflow: hidden;
width: 100%;
}
#topspacer
{
background: #fff;
border-color: #333333;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
height: 25px;
width: 100%;
}
#contentwrapper
{
background: #ffffff;
border-bottom-style: solid;
border-color: #333333;
border-bottom-width: 1px;
border-right-style: solid;
border-right-width: 2px;
border-width: 0px 0px 0px 1px;
float: left;
width: 100%;
overflow-x: hidden;
margin: 0px;
padding: 0;
}
#contentcolumn
{
background: #ffffff;
height: 100%;
margin: 0 250px 0 110px;
text-align: left;
overflow-x: hidden;
}
#leftcolumn
{
background: #DDDDC8;
float: left;
margin-left: -99.9%;
text-align: left;
width: 110px;
overflow-x: hidden;
}
#rightcolumn
{
background: #DDDDC8;
float: left;
height: 100%;
margin: 0 0 0 -250px ;
padding: 0;
width: 250px;
overflow-x: hidden;
}
#rightcol1
{
background: #f0f0e7;
float: left;
height: 100%;
padding: 0;
text-align: left;
margin: 0px 5px 0px 5px;
width: 108px;
overflow-x: hidden;
border-color: #333333;
border-left-style: dotted;
border-width: 1px;
}
#rightcol2
{
background: red;
float: left;
height: 100%;
margin: 0 0 0 0;
text-align: center;
text-align: center;
width: 120px;
overflow-x: hidden;
}
#footer
{
clear: left;
border-color: #000000;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 0px 1px 1px 1px;
background-color: #666;
color: white;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10px;
height: 75px;
text-align: center;
width: 100%
}
/*Margins for inner DIV inside each column (to provide padding)*/
.innertube
{
margin: 10px;
margin-top: 0;
}
</style>
</head>
<body onLoad="P7_equalCols2(1,'leftcolumn','P','rightcolumn','P')">
<div style="text-align:center;margin-top:10px;">
<img src="../images/banner.gif" alt="" style=" height:90;
margin-bottom:5px;" />
<br /><br />
</div>
<div id="maincontainer">
<div id="topsection"> </div>
<div id="horizontnav">
<!-- horizontal Tabs -->
<div id="tabs">
<ul>
<li><a href="frontpage.htm"><span>Home</span></a></li>
<li><a
href="section_news.htm"><span>News and Analysis</span></a></li>
<li id="current"><a
href="section_industries.htm"><span>Industry Resources</span></a></li>
<li><a
href="section_specialeditions.htm"><span>Special Editions</span></a></l
i>
<li><a href="section_community.htm"><span>Community</span></a></li>
<li><a
href="section_honors.htm"><span>Honors and Awards</span></a></li>
<li><a href="section_About.htm"><span>About Us</span></a></li>
<li><a href="section_contact.htm"><span>Contact</span></a></li>
</ul>
</div>
</div>
<!-- end horizontal Tabs -->
<div id="topspacer"></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<h1>Industry Resources</h1>
<br>
dsadsadasdsa
</div>
</div>
</div>
<!--end content column -->
<!-- begin left column -->
<div id="leftcolumn">
<div id="navlist3">
<ul> <!-- CSS Tabs -->
<b><li><a href="section_industries_bank.htm"
class="on">Banking/Fin</a></li>
<li><a href="section_industries_entre.htm">Entrepreneurs</a></li>
<li><a href="section_industries_health.htm">Health</a></li>
<li><a href="#" id="current"> Law/Gov</a></li>
<li><a href="#"> Construction</a></li>
<li><a href="#"> Technology</a></li>
<li><a href="#"> Transportation</a></li>
<li><a href="#"> Other</a></li></b>
</ul>
</div>
</div>
<!-- end left column -->
<!-- begin right column -->
<div id="rightcolumn">
<!-- begin right column left side -->
<div id="rightcol1">
d
<p>
</p>
</div>
<!-- end right column left side -->
<!-- begin right column right side -->
<div id="rightcol2">
advertisement <br /> <br /> <img src="../images/banners/125x125.gif"
width="110" alt="" />
advertisement <br /> <br /> <img src="../images/banners/125x125.gif"
width="110" alt="" />
advertisement <br /> <br /> <img src="../images/banners/125x125.gif"
width="110" alt="" />
<p>
cassssssssssssssssss
<p>
</p>
</div />
<!-- end right column right side -->
</div>
<!-- end right column -->
<div id="footer">
<br> New Hampshire Business Review: About Us | Privacy Policy |
Jobs |
Advertise | RSS Feeds<br>
McLean Media Communications, Inc.: Nashua Telegraph | etc | etc
|
etc <br>
<br>
Copyright © 1998-2007 by New Hampshire Business Review, 150 Dow
St.,
Manchester, NH 03101<br>
New Hampshire Business Review is a registered trademark. All
rights
reserved.
<br>
</div>
<!-- end -->
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks