CSS and containers question.

Discussion in 'Web Design and Development' started by definitive, May 18, 2011.

  1. definitive macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #1
    I'm trying to make a simple page with a sidebar, and having a small issue. The thing starts out like this:

    I have a container (wrapper), and inside it I have two other containers (left box, and right box - sidebar). The main container has no background color, the left container is white, and right is blue. The white (left) container has lots of text and images, so it's tall. The blue (right) container does not have a lot of info, so it just floats in the air. Is there a way to make the right container's height variable depending on the overall height of the main container + the white container? I tried height: 100%; but that didn't change anything.

    Here's the code:

    Code:
    #container {
    	overflow: hidden;
    	width: 100%;
    }
    
    #leftcolumn { 
    	float: left;
    	color: #fff;
    	padding: 10px;
    	width: 600px;
    	display: inline;
    	position: relative;
    }
    
    #rightcolumn {
    	background: #0000ff;
    	display: inline;
    	padding: 10px;
    	width: 300px;
    	float: right;
    	position: relative;
    }
    
    html is basic div id's where left + right columns are inside container.
     
  2. UTclassof89 macrumors 6502

    UTclassof89

    Joined:
    Jun 10, 2008
    #2
    to be able to specify 100% height on HTML elements, you have to include the following CSS rule:

    PHP:
    htmlbody{
    height:100%;
    }
     
  3. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #3
    This will work... kinda. Unfortunately the effect is inconsistent across browsers in my experience. The other way is kind of a cheat, but it gives the illusion of the desired effect:

    Make the wrapper background blue as well. The white left container will cover the blue on the left side, but on the right it will look like the side bar is 100% height because it's the same color as the wrapper.
     
  4. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #4
    Thanks to both of you for your help. I tried UTclassof89 method, but as Darth.Titan stated, there were compatibility issues.

    Darth.Titan: I've tried your solution and it worked (basically made a 900px by 1px background for the main container where the left side was white, and right side was blue). Is there a chance that it could cause some compatibility problems down the road for the more recent browsers such as ie7+, firefox 3.5+ and safari 4+, etc.?
     
  5. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #5
    There shouldn't be any compatibility issues moving forward, that's a fairly standard way to create the effect you are trying to accomplish.
     
  6. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #6
    I've heard of a bug in IE where background images with one of the dimensions being just 1px not displaying properly. You might want to make it 2px high. I haven't seen the bug myself but you never know. I can't remember where I saw the report.

    Also 900px isn't particularly wide these days - you could always make the image 2000px wide so as to allow for future changes.
     
  7. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #7
    I agree but would increase the pixel height to 10 instead of just 2. The difference in file size is negligible.
     
  8. -pete- macrumors member

    Joined:
    Apr 20, 2011
    #8
    The width doesn't really matter if you clamp it in place ie...

    Code:
     #container
    {
           background:   #fff url("/images/blue.jpg") repeat-y left top;
    }
    An area the size of blue.jpg will be blue stretching the height of your page, the rest will be white :)
     
  9. brisbaneguy29, May 24, 2011
    Last edited: May 24, 2011

    brisbaneguy29 macrumors 6502

    brisbaneguy29

    Joined:
    Nov 27, 2007
    Location:
    Brisbane
    #9
    If you want to make all your columns fill to equal height of the tallest column, use CSS. Add some padding to the bottom of the containers and take it away with negative margin. The amount you apply is arbitrary, make it what ever you like, just as long as it is more than the tallest column will ever be. This will make equal height columns, with the height of the content of the tallest one.

    Code:
    #container {
    	overflow: hidden;
    	width: 100%;
    }
    
    #leftcolumn { 
    	float: left;
    	color: #fff;
    	padding: 10px 10px 2000px 10px;
            margin: 0 0 -2000px 0;
    	width: 600px;
    	display: inline;
    	position: relative;
    }
    
    #rightcolumn {
    	background: #0000ff;
    	display: inline;
    	padding: 10px 10px 2000px 10px;
            margin: 0 0 -2000px 0;
    	width: 300px;
    	float: right;
    	position: relative;
    }
    
    No need for background images and works in all browsers.
     
  10. definitive thread starter macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #10
    thanks, i'm gonna give it a try on my next project.
     

Share This Page