49 users online (1 members and 48 guests)  


  Results 1 to 3 of 3

Related

  1. CSS two column problem    Forum: CSS Forum
    Replies: 5
  2. Replies: 0
  3. CSS Layout - 3 Column Plus    Forum: HTML Forum
    Replies: 3
  4. Sorting by column on webpage    Forum: CGI Perl Forum
    Replies: 2
  5. right column shifts    Forum: CSS Forum
    Replies: 3
  1. #1
    Damian's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2003
    Location
    South Africa
    Posts
    2

    Question extensible left column

    Hi I'm new to CSS and my problem is this: I have been laying out pages with the navigation links with a background contained in a <div> tag set on the left side of the page. I would like it to extend the length of this block to match the length of the content in the main section.
    With a table this would be easy as the one cell would expand to match the other.
    What am I missing here, I have tried several different things and am getting nowhere, the reason this is doing my head in is that the site that I am curently working on is about 165 pages and reseting the height on each page manualy(and repeatedly if I change a heading or font size in my main style sheet) is incredibly time consuming. If anyone could help me it would be a life saver.

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    start with an idea I mentioned in another post, let me know how you get on -

    http://www.ahfb2000.com/webmaster_he...v&pagenumber=1
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Damian's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2003
    Location
    South Africa
    Posts
    2
    Thanks for the help.
    The code below works for me, the strange thing is that if you remove the height parameter from the .main class the whole thing goes wrong, it makes no diference that the height in this case is 1px.
    When I was trying this previously I didnt bother to set a height for the .main class as I simply thought that it would extend to fit the content (which it does) Is this a browser issue? (I am using IE6).
    Thanks again.




    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <head>
    <title></title>
    <style>
    .main{width:600px; height:1px; background:#FFFFCC;}
    .navbar{height:100%; width:200px; float:left; background:#0066FF;}
    </style>
    </head>
    <body>
    <div class="main">
    <div class="navbar">
    <a href="#">LINK</a>
    </div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    </div>
    </body>
    </html>



Tags for this Thread