Need some help with 3 col content issue

**bobth** · 02-24-2008, 03:31 PM

I could use a hand with this...I have a simple 3 col neg margin layout that is giving me some headaches. I realize this is a question that has been probably asked before but I'm not finding what I need.

Link is http://nhstage.sv.publicus.com/nhcom2/section.htm

3 columns within a wrapper div...header, etc, above all well...

So within the wrapper there is a center col, right col, left col. Background image that tiles for background colors in R and L cols.

Issue is the right and left col both have content that is going past the content wrapper (1px outlined) and past the center content. Divs seem ok as far as closed, etc in the right order, etc.

So how to set height to accomodate content in R and L cols. It would seem as though the content wrapper should stretch for this but not doing it here. Whatever I'm missing, not seeing I would appreciate it a great deal.

Thanks

**BLiZZaRD** · 02-24-2008, 04:13 PM

In this CSS: includes/neighbors_main.css

Find this:

Code:

.innertubeleft3col {
margin:0px 2px 0 10px;
}

and this:

Code:

.innertuberightcol {
margin:52px -12px 0 5px;
}

And add:

Code:

overflow:auto;

to each of them.

**bobth** · 02-24-2008, 04:58 PM

Thank you very much for taking a look. The overflow fix didn't work, however...I have to assume the div structure is wrong but I'm just not seeing it and I can't get the fix... I added the code for the page to below if something jumps at you that isn't being seen by me. I very much appreciate the help.

http://nhstage.sv.publicus.com/nhcom2/section.htm

<!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"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Telegraph Neighbors > Local News</title>

<link rel="stylesheet" href="includes/global.css" type="text/css" />
<link href="includes/neighbors_main.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript" src="spryassets/SpryTabbedPanels.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryTabbedPanels.js"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

</head>

<body>
<a name="top" id="top"></a>

<div id="maincontainer">



<div class="topad">
top ad
</div>

<div id="header">

<div id="logo"> <img src="images/logo3.gif" width="941" height="57" style="border: 0px; margin-left: 8px; margin-bottom: 10px;margin-top: 0px;" /></div>
<div id="interact"> interact</div>

</div>



<div id="topsection">



<div id="tabsH">
<ul style=" font-weight: bold; font-weight:12px;">

<li id="current"><a href="nh.html">Home</a></li>
<li ><a href="nh01.html">What to Do</a></li>
<li><a href="nh03.html">Where to Stay</a></li>
<li><a href="nh04.html">Where to Eat</a></li>
<li ><a href="nh05.html">Shopping (Deals?)</a></li>
<li><a href="nh017.html">Site Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</div>





<div id="contentwrapper" style="background-image: url(images/contentback.gif); border: 1px #333 solid;">


<div id="content3column" >



<div class="innertube">

<h1><div align="left"><a href="http://nsedit.sv.publicus.com/apps/pbcs.dll/section?Category=NEIGHBORS">NEIGHBORS</a> >  LOCAL NEWS</div></h1>

sssssssssssssssssssssssssssss

</div>
</div>
</div>



<div id="leftcolumn3" STYLE="background-color: #FFcccc;">

<div class="innertubeleft3col" style="overflow:auto;">
sssssssssssssssssssssssssssssssssssssssssss
</div>

</div>



<div id="rightcolumn3" style="background-color: #eeefff;">

<div class="innertuberightcol" style="overflow:auto;">

ssssssssssssssssssssssssssssssssssssssssss

</div>

</div>

<div class="bottomad" <div id="footer" style="background-color: #FFEEEE;">footersss
</div>
bottom adsss
</div>
<div style="clear: both;"></div>
<div class="bottomoffooter">
sss
</div>

<div style="left: 127px; top: 119px;" id="qTip">ss</div></body></html>

**BLiZZaRD** · 02-24-2008, 05:13 PM

I am curious as to why you would use 3 different CSS files and then place CSS style rules in the html page itself?

Wouldn't it be easier to use one method or the other?

Try placing the overflow:auto; on the outermost containing div for each sidebar.

**bobth** · 02-24-2008, 07:09 PM

Thanks...I know what you're saying. The page is in transit and I'm working with the style sheets from other sites I've done till this one is in gear.

The outermost div closest to what you are referring to has that style in it and doesn't seem to be helping.

As in "<div class="innertubeleft3col" style="overflow:auto;">" . The divs still punch through the wrapper for the 3 cols.

Thanks

Bob

**BLiZZaRD** · 02-24-2008, 07:20 PM

Going to have to play around with it, or get the CSS squared away first. It appears to be needed in one of 4 spots... I will let you figure out which

either: rightcolumn3 and leftcolum3, or innertube, or content3column or contentwrapper.. as they are all nested together.

Hope it works for you. If not I will take a deep look in a bit.

**bobth** · 02-24-2008, 09:20 PM

afternoon...I tried all combinations of adding overflow:auto; into any and all divs we mentioned...nothing works at this point. Adding overflow:auto; to the contentwrapper div pushed both R and L cols below the center one, however. The basis of this layout was the dynamicdrive 3 col fixed layout.

re the multiple css sheets...the only one related to the layout should be the neighbors_main.css of which the code I put in the head of this doc at this time ...below.

The other sheets are related to tabs and layout and do not affect the layout here. I detached them and no changes.

Code below and, again, I very much appreciate you helping me with this. It's got to be something pretty obvious I'm missing.

<!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"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Telegraph Neighbors > Local News</title>

<link rel="stylesheet" href="includes/global.css" type="text/css" />

<script language="JavaScript" type="text/javascript" src="spryassets/SpryTabbedPanels.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryTabbedPanels.js"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

</head>

<body>
<a name="top" id="top"></a>

<div id="maincontainer">



<div class="topad">
top ad
</div>

<div id="header">

<div id="logo"> <img src="images/logo3.gif" width="941" height="57" style="border: 0px; margin-left: 8px; margin-bottom: 10px;margin-top: 0px;" /></div>
<div id="interact"> interact</div>

</div>



<div id="topsection">



<div id="tabsH">
<ul style=" font-weight: bold; font-weight:12px;">

<li id="current"><a href="nh.html">Home</a></li>
<li ><a href="nh01.html">What to Do</a></li>
<li><a href="nh03.html">Where to Stay</a></li>
<li><a href="nh04.html">Where to Eat</a></li>
<li ><a href="nh05.html">Shopping (Deals?)</a></li>
<li><a href="nh017.html">Site Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</div>





<div id="contentwrapper" style=" background-image: url(images/contentback.gif); border: 1px #333 solid; ">


<div id="content3column" >



<div class="innertube">

<h1><div align="left"><a href="http://nsedit.sv.publicus.com/apps/pbcs.dll/section?Category=NEIGHBORS">NEIGHBORS</a> >  LOCAL NEWS</div></h1>

sssssssssssssssssssssssssssss

</div>
</div>
</div>



<div id="leftcolumn3" style="background-color: #FFcccc;">

<div class="innertubeleft3col" >
ssssssssssssssssssssssssssssssssss
</div>
</div>



<div id="rightcolumn3" style="background-color: #eeefff; ">

<div class="innertuberightcol" >

ssssssssssssssssssssssssssssssssssssssssss

</div>
</div>

<div id="footer" style="background-color: #FFEEEE;">footersss
</div>
bottom adsss
</div>
<div style="clear: both;"></div>
<div class="bottomoffooter">
sss
</div>

<div style="left: 127px; top: 119px;" id="qTip">ss</div></body></html>

**BLiZZaRD** · 02-25-2008, 03:26 PM

I will have a closer look as time permits. Also please wrap your html and other code snippets in [code] brackets, as this will help keep the posts manageable in size and easier to read.

**bobth** · 02-25-2008, 05:25 PM

Thank you for your time but at this time rather than spend any more time on this I'm redoing this from the start...just not worth the time working with this page. But thanks again for your help.

Thread: Need some help with 3 col content issue

Thread Tools

Search Thread

Need some help with 3 col content issue

overflow fix did not work....div order not right? like that?

Bookmarks

Bookmarks

Posting Permissions