PDA

View Full Version : liquid layout css problem...could use a hand



bobth
02-15-2007, 12:46 PM
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/layouts/item/css-liquid-layout-31-fixed-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&nbsp;and&nbsp;Analysis</span></a></li>

<li id="current"><a

href="section_industries.htm"><span>Industry&nbsp;Resources</span></a></li>

<li><a

href="section_specialeditions.htm"><span>Special&nbsp;Editions</span></a></l

i>

<li><a href="section_community.htm"><span>Community</span></a></li>
<li><a

href="section_honors.htm"><span>Honors&nbsp;and&nbsp;Awards</span></a></li>

<li><a href="section_About.htm"><span>About&nbsp;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>

Freeman
02-15-2007, 10:43 PM
What is it you are trying to accomplish?

bobth
02-16-2007, 03:23 AM
evening....thank you for your inquiry but I just got it working. Again, thank you.