SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does the left column not reach bottom of the page?

    Gudday all
    I have a visual problem on my wife's site at Applique, Bear, Cloth doll, Stitcherys, Stitcheries, Quilt, Bags patterns and kits - Petals & Patches.

    It is set up as a 2 column site with the navigational buttons on the left. You will notice that the context of the right column wraps around under the bottom of the left column. I don't wish to have that behaivour, rather the right column should stay in it's own position.
    I am sure that the solution is frightfully simple (I did a quick search but not knowing what to call the problem I found no obvious previous thread(s))

    The code is question is
    Code:
    <body class="bodytext">
    <div id="outer">
    <div id="hdr" align="center"><img src="images/banner800.jpg" alt="" border="0" width="361" height="154" />
    <h1>Bags</h1>
    </div> <!-- end of hdr -->
    <div id="bodyblock" align="right">
    <div id="l-col">
    <ul id="navbuttons">
    <!-- buttons go here -->
    </ul>
    </div> <!-- end of l-col -->
    <div id="cont">
    <!-- content here -->
    </div> <!-- end of cont -->
    </div> <!-- end of bodyblock --> 
    <div id="ftr">
    <p class="disclaimer">Every attempt has been made to ensure the accuracy of the information provided on this website. Please advise us if you have any concerns relating to this site. 
    Contact the webmaster for further information.</p>
    <p class="webmaster">Site built and maintained by <a class='navlink' href='mailto:xxxx@petalsandpatches.com?subject=Request for the Webmaster of Petals and Patches'>TIGER TIM</a>.</p>
    <script type="text/javascript">
    //<![CDATA[
    var now =  new Date();
    document.write('<p class="webmaster">');
    document.write("Site design &copy; Petals and Patches 2004 -" + now.getFullYear() + ".");
    document.write('<p class="lastupdated">');
    document.write("Last updated on " + document.lastModified.substring(3,5) + "/" + document.lastModified.substring(0,2)+ "/" + document.lastModified.substring(6,10) + "</p>");
    //]]>
    </script>
    </div> <!-- end of ftr --->
    </div> <!-- end of outer -->
    </body>
    There is an outer wrapper called 'outer' . A header, bodyblock contains the l-col (the left column) & right column (cont) and a footer to finsish off.
    Admittedly I sometimes wonder why I have both outer and bodyblock. It was a long time ago and maybe I don't need both of them?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Add this:

    Code:
    #cont {
      background: none repeat scroll 0 0 #FFFFDF;
      border: 0 solid #00FFFF;
      color: #333333;
      text-align: left;
      width: 650px;
      float: right;
    }
    You'll also need to add

    Code:
    .webmaster {
      color: Red;
      font-family: Garamond,"Times New Roman";
      font-size: 11px;
      clear: both;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph
    Thank you for that. They work fine though I am not entirely sure why.
    Code:
    #cont {
      width: 650px;
      float: right;
       ...
    }
    makes some sense but
    Code:
    .webmaster {
    ....
      clear: both;
    }
    has me puzzled.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tigers! View Post
    Code:
    .webmaster {
    ....
      clear: both;
    }
    has me puzzled.
    Try the page without it. That element jumps up to the left side. If you want it at the bottom, you have to tell it not to wrap around the floated items above by saying—"make sure it stands clear of any floated items, both left and right". Perhaps clear: right would have been enough in this case. Typing "both" was one fewer character, and I'm lazy.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gudday all
    Rather than start this thread again I'll reuse my existing one.

    I have been fiddling around with my wife's site, trying to 'improve it'. As seems usual with my work any changes made have unforeseen effects that seem hard to rollback.

    Looking at http://www.petalsandpatches.com/contactus.hm you will see that the content in the right column wraps around the bottom of the left column.
    Whilst making the suggestions kindly suggested earlier and trying for some minor (!) formatting changes in the left column I arrived at what you see at http://www.petalsandpatches.com/contactusDec11-1.htm.
    The left column is above that of the right and part of the right column, at the very end, seems to have disappeared.

    contactus.htm uses petalsandpatches.css & petalsandpatches-layout.css
    while
    contactusDec11-1.htm uses petalsandpatches.css & petalsandpatches-layoutDec11.css

    Looking back at the work I have done the only changes in the -layout.css between the versions is
    petalsandpatches-layoutDec11.css
    Code:
    ul#navbuttons {
        padding:0;
        list-style:none;
        width:130px;
    	margin:2px 0px 2px 0px; /* added 10/12/11 */
    	border:0;   /* added 11/04/11 */
    	height:30px;   /* added 10/12/11 */
    }
    
    #cont {
     background: #FFFFDF; 
     color: #333333;
     border-width: 1 1 1 1;
     text-align: left; 
     border: 0px solid #00FFFF;  
     width: 650px;
     float: right;
     font-size: 14px; /* added 10/12/11 */
    }
    
    #hdr {
     /*height:60px;*/
     margin-left:auto;  /* added 10/12/11 */
     margin-right:auto;  /* added 10/12/11 */
     background:#FFFFDF; 
     color: #333333;
     text-align: center; /* added 10/12/11 */
     /*border:1px solid #FF0000; */ 
     }
    The changes are marked with /* added 10/12/11 */.

    What have I done?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Not sure quite how you want this laid out now, but it would help to add this:

    Code:
    #bodyblock {
      background: none repeat scroll 0 0 #FFFFDF;
      border: 0 solid #FAAF00;
      color: #333333;
      float: right;
      padding: 0;
      position: relative;
      text-align: left;
      width: 800px;
      overflow: hidden;
    }

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After further mucking around and using ralph.m's suggestions I am still no closer to resolving my visual problem.
    If you go to http://www.petalsandpatches.com/indexSep12.htm you can see my latest attempts.
    How do I get the LH column (green) to continue down until it reaches the bottom of the orange box so that the text does not wrap underneath the navigation column?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, unless you've changed your HTML, I made a mistake above.

    You could either do this:

    Code:
    #cont {
    overflow:hidden;
    }
    or this, which looks a bit nicer:

    Code:
    #cont {
    margin-left: 150px;
    }
    Off Topic:

    I thought the tiges would make the finals this year.

  9. #9
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, unless you've changed your HTML, I made a mistake above.

    You could either do this:

    Code:
    #cont {
    overflow:hidden;
    }
    or this, which looks a bit nicer:

    Code:
    #cont {
    margin-left: 150px;
    }
    Thanks ralph I'll give it a burl

    Off Topic:

    I thought the tiges would make the finals this year.
    So did I. Thought I would buy finals tickets for the 1st time in a decade. Then those 3 close losses.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tigers! View Post
    So did I. Thought I would buy finals tickets for the 1st time in a decade. Then those 3 close losses.
    O well, tere will be some good games anyway.

    Did those code options help/make sense?

  11. #11
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph.
    That worked a treat. If you go to http://www.petalsandpatches.com/indexSep12.htm you can see the result.
    Had me going for awhile though. I could see no change. Then remembered to hit refresh.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool. Glad that helped. (And yes, refreshing the page is often a crucial step that causes a lot of confusion. )


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
  •