www.webdeveloper.com
Results 1 to 2 of 2

Thread: Issues with column length

  1. #1
    Join Date
    Apr 2006
    Posts
    30

    Issues with column length

    Hi guys, I'm currently facing a bit of a challenge. I just recently switched, after years of experience, from using tables to CSS for layouts - so bear with me.

    I need two columns for the content area of my design, and the way I've been doing that on the pages I've built is to have a middle container, and in that have a relatively positioned content block that's the right size for whichever column is bigger. I don't specify a height for this portion because it will usually grow, and I know it will be the bigger one. To get the other column, I simply add an absolutely positioned div nested inside the relatively positioned one, and position it accordingly.

    This has worked in the past, but for this website, I'm not sure which column will be bigger. It will actually vary from page to page, depending on how much information is or isn't available.

    The problem is that if the absolute positioned div is the bigger of the two, it will obviously be displayed over part of the footer.

    So my question is:

    How do I get two columns using CSS where either one will expand the parent container?

    Here's my very dumbed down HTML:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="format.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div class="container">

    <div class="header"></div>

    <div class="middle">

    <!-- right column starts here -->
    <div class="content3">
    <!-- left column box starts here -->
    <div class="ad_box3_2">
    Left column ads go here.</div>
    <!-- left column box ends here -->
    Right column text goes here.
    <!-- right column ends here -->
    </div>

    </div>

    <div class="footer"></div>

    </div>

    </body>
    </html>


    And here's the CSS for the middle area where I'm having issues:

    .middle {
    width: 760px;
    }
    .content3 {
    position: relative;
    display: block;
    top: 0px;
    left: 330px;
    margin: 0px;
    width: 415px;
    padding: 0px;
    min-height: 565px;
    }
    .ad_box3_2 {
    position: absolute;
    left: -315px;
    margin: 0px;
    padding: 0px;
    width: 300px;
    text-align: left;
    text-indent: 0px;
    }


    The min-height thing fixes the issue in FF, but not IE. Thanks for any help given, and if anyone notices any other major issues with the way I'm doing this (not pertaining to the actual problem), please speak up.

    Thanks guys

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    It's the absolute positioning. Use floats and set the footer to clear:both to avoid footer overwriting. Check the Cederholm book in my sig for good examples.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles