SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left column height problem is=n CSS layout

    Hi there

    I was wondering if someone could help me out here... Heres my website:

    http://www.trailblasters.co.uk/

    Notice the column on the left with the grey background. The problem is that the height on the maincontent DIV (white background) does not adjust automatically to accomodate the left column. Try increasing the size of the text to see what I mean (the left column will crossover the footer).

    How do I get the maincontent DIV to automatically adjust to accomodate the left column?

    Heres my CSS: http://www.trailblasters.co.uk/style/master.css

    Many thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The reason is that you have absolutely placed your left column which means it is removed from the flow and will not take any notice of other content.

    You need to float the column if you want it to interact with other elements on the page.

    e.g.
    Code:
    div#footer {
     clear:both;
     background-color:#990000;
     text-align: center;
     padding: 15px 0px;
     color:white;
    }
    /*---------- MAIN BOXES END ----------*/
    /*---------- SIDE BOXES START ----------*/
    /* invisible container box for small content boxes*/
    div#left {
     background: #666 url(http://www.trailblasters.co.uk/images/left_bg.gif) no-repeat bottom left;
     width: 200px;
     margin:0 0 10px 0;
     float:left;
    }
    * html div#left{margin-right:-3px}/* ie 3px jog fix*/
    .horirule{
     height: 5px;
     border-top: 1px solid #CCCCCC;
     margin-top: 7px;
     display: block;
     line-height: 3px;
    }
    Replace your same named style with those above.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes! Silly me. Thats spot on, thank you very much for your time

  4. #4
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again. I've just noticed a few problems which have occured since changing the left column to float....

    Mainly, the content on some of the pages has been pushed down so that it starts where the left column ends (in ie6). For example:

    http://www.trailblasters.co.uk/video.php

    Also, theres some strange behaviour in some of the styling on text and divs. For example, the Notice on the homepage should be in a grey box with a border, but the styling disappears when you rollover one of the main links (weird).

    Any ideas as to how I can resolves these issues?

    Many thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi

    The problem with the content dropping is ie's problem with finding the width of an element when it has been defined by margins alone. IE is making the 100% tables to be too wide and is dropping them below the left column.

    Add this code which should fix the problem (and the 3 pixel jog at the same time).

    Code:
    div#maincontent {
    margin: 0px 0px 0px 200px;
    padding: 10px;
    background-color:white;
    }
    /* commented backslash hack v2 \*/ 
    * html #maincontent{height:1%;margin-left:197px} 
    /* end hack */
    Paul
    Edit:


    The above will also solve the disappearing backgrounds and borders

  6. #6
    SitePoint Addict o~~Goatee~~o's Avatar
    Join Date
    Jan 2004
    Location
    North Yorkshire UK
    Posts
    350
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Paul. Had a feeling it was the table width, but didn't realise that I could resolve the issue through the CSS for the maincontent DIV. Cheers


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
  •