Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS two column glitch

Discussion in 'Website Design Forum:' started by philjohns, Jan 14, 2009.

  1. philjohns

    philjohns Senior Member

    This is really bugging me!

    Im designing a website with two columns, the left is thin and used for banner adverts and the right is wider and used for content.

    It works fine until the left column becomes longer than the right column - when this happens the background image of my container div stops repeating itself - it will only repeat to the bottom of my right div!

    Anyone else have this issue and/or know how to solve it?!


  2. miralize

    miralize Junior Member

    We really need some code to look at to help. Its kinda hard to understand without it
  3. Jazajay

    Jazajay Active Member

    Take it you are floating the left coloum left.
    What you need to do is add a clear div at the bottom and then clear both so for example.

    <div id="wrapper">
    <div id="left">

    </div> //end of left col.
    <div id="main">

    </div> //end of main
    <div id="clear"></div>
    </div> //end of wrapper

    Then have CSS similar to this ~

    By the sounds of it it is because the left coloum is floated, this will then take it out of the normal flow of the document, when it hits the bottom it justs floats over it, if you like, and so therefore the background image doesn't repeat.

    The new div with the clear id basically stays at the bottom of the floated element, so will move the bottom of the wrapper div down, and thus the background image, when the left coloum becomes too big.

    Let me know if that has sorted it.
    If not wack some code up, as miralize suggests, and we'll have another look.


    Purple ~ XHTML
    Green ~ CSS
    Orange ~ Comments
  4. Aarlev

    Aarlev Member

    Is it not better to make it a class instead of an id? I always thought that if you want to have to option to use it more than once then you should make it a class?
  5. Jazajay

    Jazajay Active Member

    Yeah you are right I suppose.
    But I look at it like this TBH ~

    id="clear" = 10 characters
    class="clear" = 13 characters.

    So extra bloat, be it small.

    That and if it is only used once then an id is semantically more correct, as a class is for mutiple items with the same code, an Id is for 1 unquie item.

    Either way it will work, so I don't suppose it actually matters if it solves the problem TBH. :)
  6. Aarlev

    Aarlev Member

    Aah yeah ok, didn't think about the bloat.
  7. Jazajay

    Jazajay Active Member

    TBH it is probably just me being sad. :D
    I mean I could label the id c instead of clear and save 4 characters, so I suppose that's a lame arguement TBH. :)

    To me it's more the semantics I suppose, but you are still right though.
  8. philjohns

    philjohns Senior Member

    THanks Jaz - it works a treat.

    Just out of interest - how would I solve it using a class?
  9. blueocto

    blueocto Senior Member

    change id to class and in the css the # would change to a .

    <div class="clear">

    .clear { clear: both;}

Share This Page