SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Unhappy need help with 2 column layout

    Hi I am building this site for a client and am having a problem with the right column height

    the url is http://egor.mtxis.com.ve/office

    I am trying to get the right column div with the google ads to follow the left column right down the bottom. You can see that it doesnt as the border gets cut off after the ad pic finishes.

    I have tried setting its height to auto or or 100% but nothing seems to work. can someone please point me in the right direction.

    Thank you in advance

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switch borders

    Eehhmmm, specify the border for the content section...?
    Regards,
    Ronald.

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    hey ronald, its the google ads section on the right and you can see the gray border on the right of the div.

    i understand that i can just put the border on the left section but it wont work if its shorter then the google ads.

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

    The link above doesn't seem to be going anywhere so I can' offer any help.

    If you are trying to do the equalising column trick then look at my 3 col thread at the top of the css forum which explains 100% height and how to achieve it.

    Let me know when the link is working and I'll take another look.

    Paul

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    the link should be working fine but heres another way: http://www.egor.co.nr/office

    thank you paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hmmm, I still can't seem to access that link ! (or the other one).

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    ok thats strange..

    what im trying to do is get the "mr" to be as long as "ml"


    lol well anyway here is the code:

    Code:
    body {background: #F4F4F4 url(images/bgtile.gif) fixed; margin: 20px 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px;}
    h1 {margin: 0 0 20px 10px; padding: 0; line-height: 17px; color: #055279; letter-spacing: -2px; font-size: 18px;}
    h3 {margin: 0 0 14px 0; color: #055279; letter-spacing: -1px; font-size: 13px; text-align: center;}
    p {margin-bottom: 30px;}
    
    a {color: #055279; text-decoration: none;}
    a:hover {text-decoration: underline;}
    
    #wrap {width: 760px; background: #FFFFFF url(images/mainbg.gif); margin: auto;}
    #top {position: relative; height: 87px; background: url(images/topbg.gif); margin-bottom: 2px;}
    #title {position: absolute; color: #055279; letter-spacing: -2px; font-size: 22px; line-height: 18px; left: 14px; top: 26px; width: 171px;}
    #right {position: absolute; left: 445px; top: 41px; width: 301px; text-align: right; font-size: 9px;}
    #hide {position: absolute; width: 2px;background: url(images/hide.gif) no-repeat; top: 89px; height: 25px; left: 6px;}
    
    #nav {margin: 0 6px; padding: 6px 0;}
    #nav a {padding: 6px 20px; border-right: 1px solid #EDEDED; color: #055279; text-decoration: none;}
    #nav a:hover {background: #EBF1F4;}
    
    #main {height: auto; background: url(images/toptopbg.gif) no-repeat; margin-top: 2px; padding: 28px 0 28px 28px;}
    #ml {float: left; width: 510px; margin-bottom: 15px;}
    #mr {float: right; border-left: 1px solid #EDEDED; padding: 0 20px 20px 20px; margin-bottom: 2px;}
    
    .catwrap {height: auto; width: 510px; font-size: 10px;}
    .catwrap p {margin: 7px;}
    .catlwrap {float: left; width: 250px;}
    .catrwrap {float: right; width: 250px;}
    .catl {height: auto; background: #FFFFFF url(images/catbg.gif) no-repeat; margin-bottom: 20px; padding-bottom: 2px; border-bottom: 1px solid #EDEDED;}
    .catr {height: auto; background: #FFFFFF url(images/catbg.gif) no-repeat; margin-bottom: 20px; padding-bottom: 2px; border-bottom: 1px solid #EDEDED;}
    
    #footer {height: 53px; background: #FFFFFF url(images/botbg.gif); font-size: 9px;}
    #footer a {text-decoration: none;}
    #footer a:hover {text-decoration: underline;}
    #footer a:visited:hover {text-decoration: underline;}
    #fl {float: left; padding: 17px 0 0 16px;}
    #fr {float: right; padding: 17px 16px 0 0; text-align: right;}
    and the html:
    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">
    <head>
    <title>Office Ergonomics Reviews</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="your keywords here" />
    <meta name="description" content="your site description here" />
    <style type="text/css">
    @import url(main.css);
    </style>
    </head>
    <body> 
    <div id="wrap"> 
      <div id="top"> 
        <div id="hide"></div> 
        <div id="title"><strong>Office</strong>Ergonomics<br /> 
          Reviews</div> 
        <div id="right">Your <strong>number one</strong> source for Office ergonomics
          reviews!</div> 
      </div> 
      <div id="nav"> <a href="#">Lorem</a><a href="#">Ipsum</a><a href="#">Dolor</a><a href="#">Sit
          Amet</a><a href="#">Consectetuer</a><a href="#">Elit</a></div> 
      <div id="main"> 
        <div id="ml"> 
          <h1>Welcome to Office Ergonomics Reviews</h1> 
          <p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetuer adipiscing
            elit. Curabitur nec nisl quis tellus varius dapibus. Nulla fringilla
            wisi nec libero. Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit. Curabitur nec nisl quis tellus varius dapibus. Nulla fringilla
            wisi nec libero. Fringilla wisi nec libero. Lorem ipsum dolor sit...</p> 
          <p><a href="sample.html">Click here to see the sample article~~</a> </p> 
          <div class="catwrap"> 
            <div class="catlwrap"> 
              <div class="catl"> 
                <h3>Ergonomic Keyboard Reviews</h3> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. <a href="#">read more...</a> </p> 
                <p><strong><a href="#">Nulla fringilla</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">read
                  more...</a></p> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. Curabitur nec nisl quis tellus varius dapibus. <a href="#">read
                    more...</a></p> 
                <p><strong><a href="#">Microsoft Natural Keyboard</a></strong><br /> 
                  Lorem ipsum dolor sit amet nec nisl quis. <a href="#">read more...</a></p> 
              </div> 
              <div class="catl"> 
                <h3> Voice Recognition Software Reviews</h3> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. <a href="#">read more...</a> </p> 
                <p><strong><a href="#">Nulla fringilla</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. <a href="#">read more...</a></p> 
                <p><strong><a href="#">Nulla fringilla (2nd edition) </a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">read
                  more...</a></p> 
                <p><strong><a href="#">Nulla fringilla 2004 </a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adip. <a href="#">read
                  more...</a></p> 
              </div> 
            </div> 
            <div class="catrwrap"> 
              <div class="catr"> 
                <h3>Alternative Mouse Reviews</h3> 
                <p><strong><a href="#">Nulla fringilla</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
                    fringilla wisi nec libero. <a href="#">read more...</a> </p> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. <a href="#">read more...</a></p> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. <a href="#">read more...</a></p> 
                <p><strong><a href="#">Nulla fringilla</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
                    fringilla wisi nec libero. <a href="#">read more...</a> </p> 
              </div> 
              <div class="catr"> 
                <h3> Chair &amp; Workstation Reviews</h3> 
                <p><strong><a href="#">Nulla fringilla</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
                    fringilla wisi nec libero. <a href="#">read more...</a></p> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
                    nec nisl quis tellus varius dapibus. Nulla fringilla wisi nec
                    libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#"> read
                    more...</a></p> 
                <p><strong><a href="#">Microsoft Natural Keyboard</a></strong><br /> 
                  Lorem ipsum dolor sit amet nec nisl quis. <a href="#">read more...</a></p> 
                <p><strong><a href="#">Curabitur nec</a></strong><br /> 
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
              </div> 
            </div> 
          </div> 
          <br style="clear:both" /> 
          <p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetuer adipiscing
            elit. Curabitur nec nisl quis tellus varius dapibus. Nulla fringilla
            wisi nec libero <a href="#">contact us</a>.</p> 
        </div> 
        <div id="mr"><img src="images/rightads.gif" alt="" /></div> 
      </div> 
      <br style="clear:both" /> 
      <div id="footer"> 
        <div id="fl">All content &copy;2004 Office Ergonomics Reviews. All rights
          reserved. Design by <a href="http://egor.mtxis.com.ve" target="_blank">Egor
          K</a>. </div> 
        <div id="fr"><a href="mailto:#">me@whatever.com</a> | <a href="#">Disclaimer</a></div> 
      </div> 
    
    </div> 
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Feb 2004
    Location
    United States
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay all you have to do is switch the border from MR to ML, as was stated by ronaldb66.

    Code:
    #ml {float: left; border-right: 1px solid #EDEDED; width: 510px; margin-bottom: 15px;}
    #mr {float: right; padding: 0 20px 20px 20px; margin-bottom: 2px;}
    It also looks as if your site may be screwed up in some browsers, but I am at school and cannot be too sure.

    By the way, I like the layout

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    thanks for the reply direAwakenings but as I said above switching the borders around is not an option. When "ml" is shorter then "mr" the border stays as long as the length of it is. what I want is to have that border reach the footer in all cases.

    Ps: i checked the site with IE, firefox, opera, and safari and it looks identical

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

    If you really want to know how to do this then I suggeset you read my thread on the 3 col layout which has an explantion of how to equalise columns and has examples of two column layouts and different techniques.

    Here's a different way that should work fo your example.

    Wrap your #ml in another div and make it wider and give it a border right.
    Code:
    #floatwrapper {float:left;width:590px;border-right:1px solid #000;}
    Place that element just around your #ml and this will give a full length border away from your content.

    Now here comes the clever part give your #mr a left border (which it already has) and then use a negative margin to drag the border on top of the other border. This takes a bit of trail and error and does rely on the fact that the google ads are always the same width of course.

    In this way the border will extend with whichever side is longest.

    For examples of other techniques to equalise columns have a look here:

    http://www.pmob.co.uk/temp/2column_simple_1.htm
    http://www.pmob.co.uk/temp/2columnce...equalising.htm
    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    If you get stuck just shout and I'll offer some code.

    Paul

  11. #11
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    cheers Paul you are a legend, I think I have it all figured out now.

    Thanks again

  12. #12
    SitePoint Member
    Join Date
    Feb 2004
    Location
    United States
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Intresting. I should have kept reading your article, except I stopped when I relized I use the same technique.

    Definatly going to have to check this out

    Thanks!


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
  •