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

General HTML and CSS

Discussion in 'Styling and Customization Questions' started by Lee, Jun 5, 2013.

  1. Lee

    Lee Well-Known Member

    I'm making a custom right hand side bar as such, which spans 100% of the height of the forum, over the header too. I have the following html and css;

    HTML:
    .container {
    width: 100%;
    }
    
    .columnLeft {
    float: left;
    width: 20%;
    }
    .columnRight {
    float: right;
    width: 80%;
    }
    
    HTML:
    <div class="container">
      <div class="columnLeft">
      <-- Sidebar HTML -->
      </div>
    
      <div class="columnRight">
      <-- Forum HTML -->
      </div>
    </div>
    It works fine in that I have two columns next to each other but, when I resize the browser down the right hand column drops below the left. Is there an easy way to just make the left column a fixed with and have the right hand column scale with the window resize?
     
  2. Lee

    Lee Well-Known Member

    Sorted this.

    I made the fixed column float to the left and gave it a 230px width. Then I set the right column up to have a margin-left of 230px. This seems to work smashingly. Although, I had to remove a few clear: both; from the default styling to get the content to sit back up at the top. Made the posts look funky too, needed some adjustment.
     

Share This Page