SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some help with 3 col content issue

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

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note...I tried adding style="overflow:auto;" to the innertube divs that enclose the L and R col content but no help.

    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. I have to wonder if the div order, etc, is wrong but I'm not seeing it. Thanks


    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>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The closing div for your contentwrapper is the wrong place so the columns aren't actually contained within it.

    Code:
                </div>
            </div>
        </div>
        <!--far left col-->
        <div id="leftcolumn3" STYLE="background-color: #FFcccc;">
    That closing div should be here:

    Code:
                <p>s</p>
            </div>
        </div>
    </div>
    <div class="bottomad"> 
        <div id="footer" style="background-color: #FFEEEE;">footer


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •