Log in

View Full Version : 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:



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


and this:



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


And add:



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 &gt; 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">
<!--

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
margin:0px;
}
#tabsH ul {
margin:0;
margin-left: -35px;
padding:8px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("images/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("images/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}

body {
font-family: verdana, arail;
font-size:12px;
background-color:#CCE5FF;
background-image: url(images/blueback5.gif);

}
-->
</style>


</head>



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

<div id="maincontainer">

<!-- header row -->

<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>

<!-- end header row -->



<div id="topsection">

<!-- top nav bar-->

<div id="tabsH">
<ul style=" font-weight: bold; font-weight:12px;">
<!-- CSS Tabs -->
<li id="current"><a href="nh.html"><span>Home</span></a></li>
<li ><a href="nh01.html"><span>What to Do</span></a></li>
<li><a href="nh03.html"><span>Where to Stay</span></a></li>
<li><a href="nh04.html"><span>Where to Eat</span></a></li>
<li ><a href="nh05.html"><span>Shopping (Deals?)</span></a></li>
<li><a href="nh017.html"><span>Site Map</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>

</div>

<!-- end topsection -->


<!-- begin content box -->

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

<!-- center col content -->
<div id="content3column" >

<!-- all innertubes provide padding for col content -->

<div class="innertube">

<h1><div align="left"><a href="http://nsedit.sv.publicus.com/apps/pbcs.dll/section?Category=NEIGHBORS">NEIGHBORS</a><span class="smallblack"> &gt; </span>&nbsp;LOCAL NEWS</div></h1>


<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>



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

<!--far left col-->

<div id="leftcolumn3" STYLE="background-color: #FFcccc;">
<!--innertubes provide col padding-->
<div class="innertubeleft3col" style="overflow:auto;">
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
</div>

</div>

<!--far right col-->

<div id="rightcolumn3" style="background-color: #eeefff;">
<!--innertubes provide col padding-->
<div class="innertuberightcol" style="overflow:auto;">

<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>


</div>

</div>

<div class="bottomad" <div id="footer" style="background-color: #FFEEEE;">footer<p>s</p><p>s</p><p>s</p>
</div>
bottom ad<p>s</p><p>s</p><p>s</p>
</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 &gt; 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">
<!--


* {
margin:0;
padding:0;
}

#header {
height:80px;
background:#fff;
}



body {

color:#000;
background-position:center;
margin:0;
padding:0;
text-align: left;
}

#maincontainer {
width:950px;
background-color:#fff;
margin:0 auto;
}

#topsection {
height:100px;
margin:0;
}

*html
#topsection {
height:20px;
}

#topsection h1 {
padding-top:5px;
margin:0;
}

#content3column {
background:#fff;
margin:10px 310px 0 115px;
}

#leftcolumn3 {
float:left;
width:105px;
margin:10px 0 100px -948px;
}

#content2column h3,#content3column h3,.divider {
clear:both;
background:#458A00 url("/graphics/neighbors/corner.gif") no-repeat right top;
color:#FFF;
font:bold 1.15em ;
margin:0;
padding:3px 0 3px 5px;
}

#rightcolumn2,#rightcolumn3 {
float:left;
width:300px;
margin:0 0 0 -310px;

}

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

}

#contentwrapper {
float:left;
width:100%;
background-image: url(images/contentback.gif);
margin-top:0;
background-repeat: repeat-y;
;
}

#content2column {
background:#fff;
margin:0 115px 0 0;
padding:3px 0 0;
}

#content2column2 {
background:#fff;
margin:0;
padding:3px 0 0;
}



.topbanner {
margin:10px 0;
}



.left_side {
float:left;
width:280px;
margin:10px 0;
padding:0;
}


.right_side {
float:right;
width:270px;
background:#FFF url(../section_files/dotted.gif) repeat-y;
color:#414141;
margin:10px 0;
padding:0 0 0 20px;
}




.innertube {
margin:15px 5px 0 10px;
}

.innertubeleftcol {
margin:1px 10px 0 0;
}

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

}

.innertuberightcolhome {
margin:8px -12px 0 3px;
}



#contents {
background:#fff;
border:1px solid #ccc;
border-top:none;
clear:both;
margin:0;
padding:15px;
}

.bottombanner {
text-align:center;
margin:20px 0 5px;
}





.clearboth {
clear:both;
}

.clear {
clear:left;
}

.footer {
clear:both;
text-align:center;
width:80%;
background-color:transparent;
line-height:1.8em;
padding-top:10px;
margin:10px 0 0 90px;
}

#footer a {
color:#FFFF80;
background:#fff;
}



#rightcolumn2home {
float:left;
width:140px;
background:#fff;
margin:0 0 0 -184px;
}




.left_box {
color:#000;
background:#FFF;
margin:0 0 10px;
padding:3px 0;
}

.title {
color:#333;
font:bold 140% ;
letter-spacing:0;
text-align:left;
margin:0 0 10px;
padding:0;
}
adding:0;
}

.subtitle {
color:#333;
font:bold 100% V;
letter-spacing:0;
text-align:left;
margin:0 0 10px;
padding:0;
}

.contentbold {
font-weight:700;
font-size:11px;
}

.topadhome {
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:5px;
background-color:#EDF3F9;
width:900px;
height:95px;
padding:5px 0 0;
}

.topad {
text-align:center;
background-color:#EDF3F9;
width:900px;
height:95px;
margin:5px auto 15px;
padding:5px 0 0;
}

.bottomad {
text-align:center;
background-color:#EDF3F9;
width:900px;
height:95px;
margin:5px auto;
padding:5px 0 0;
}

* html
.bottomoffooter {
margin:0 0 5px;
}

.right_adcol {
width:125px;
margin:0 -10px 0 5px;
}






.bold {
font-size:11px;
font-weight:700;
}




h1 {
letter-spacing:0;
font-weight:700;

font-size:20px;
color:#C44D4D;
margin:0;
padding:0;
}

h1 a,h2 a {
text-decoration:none;
color:#C44D4D;
}

h1 a:hover,h2 a:hover {
color:#C44D4D;
background:inherit;
text-decoration:underline;
}

h2 {
font:bold 1.5em ;
letter-spacing:-1px;
font-size:1.5em;
color:#000;
background:inherit;
margin:0 0 5px;
padding:0 0 7px;
}

p {
margin:0 0 10px;
}

ul {
list-style:none;
margin:0;
padding:0;
}

a {
color:#E0691A;
background:inherit;
}

a:hover {
color:#03c;
background:inherit;
}



* html #contentwrapper,* html #rightcolumn2,#rightcolumn3,#rightcolumn2home {
margin-top:0;
}




* html .headingbarrcol,* html .headingbarrcolhome,.table {
margin-top:5px;
}





/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
margin:0px;
}
#tabsH ul {
margin:0;
margin-left: -35px;
padding:8px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("images/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("images/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}

body {
font-family: verdana, arail;
font-size:12px;
background-color:#CCE5FF;
background-image: url(images/blueback5.gif);

}
-->
</style>


</head>



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

<div id="maincontainer">

<!-- header row -->

<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>

<!-- end header row -->



<div id="topsection">

<!-- top nav bar-->

<div id="tabsH">
<ul style=" font-weight: bold; font-weight:12px;">
<!-- CSS Tabs -->
<li id="current"><a href="nh.html"><span>Home</span></a></li>
<li ><a href="nh01.html"><span>What to Do</span></a></li>
<li><a href="nh03.html"><span>Where to Stay</span></a></li>
<li><a href="nh04.html"><span>Where to Eat</span></a></li>
<li ><a href="nh05.html"><span>Shopping (Deals?)</span></a></li>
<li><a href="nh017.html"><span>Site Map</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>

</div>

<!-- end topsection -->


<!-- begin content box -->

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

<!-- center col content -->
<div id="content3column" >

<!-- all innertubes provide padding for col content -->

<div class="innertube">

<h1><div align="left"><a href="http://nsedit.sv.publicus.com/apps/pbcs.dll/section?Category=NEIGHBORS">NEIGHBORS</a><span class="smallblack"> &gt; </span>&nbsp;LOCAL NEWS</div></h1>


<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>



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

<!--far left col-->

<div id="leftcolumn3" style="background-color: #FFcccc;">
<!--innertubes provide col padding-->
<div class="innertubeleft3col" >
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>
</div>
</div>

<!--far right col-->

<div id="rightcolumn3" style="background-color: #eeefff; ">
<!--innertubes provide col padding-->
<div class="innertuberightcol" >

<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>

</div>
</div>

<div id="footer" style="background-color: #FFEEEE;">footer<p>s</p><p>s</p><p>s</p>
</div>
bottom ad<p>s</p><p>s</p><p>s</p>
</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.