SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Redheadskater's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question background-height issue

    Hello-

    First, I did search the forums to look for information that might help me figure out what's going on - unfortunately didn't have much luck. I know there are members out there who get tired of people asking easy (dumb) questions. So, at least I made an attempt to figure it out for myself.

    Here's the problem:
    I've got a 2 col liquid layout. The left col has a back ground image. The image isn't stretching the entire length of the page - only as far as the content in that div. Attached is a pic so you can see what I'm talking about.

    Here's the css code:
    Code:
    body {
    	margin: 0px;
    	background-color: #AB9978;
    	padding: 0px;
    }
    
    #leftcol {
    	position: absolute;
    	margin: 0px;
    	margin-right: 15px;
    	padding: 0px;
    	left: 0px;
    	top: 0px;
    	height: 100%;
    	width: 25%;
    	background-image: url(images/jf-maroonbkgrnd.jpg);
    	background-repeat: repeat-y;
    	background-color: #4F2F32;
    	background-attachment: scroll;
    	
    }
    #maincontent {
    	position: absolute;
    	margin-top: 0px;
    	margin-left: 26%;
    	padding: 5px;
    	width: 70%;
    	height: 100%;
    	border-left-width: thick;
    	border-left-style: double;
    	border-left-color: #000000;
    	
    }
    Thanks in advance for your input.
    Attached Images Attached Images
    Lisa
    ~~~~~~~~~~
    Time flies - it's up to you to be the navigator.

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

    You need to set the body height to 100% to allow a nested element to extend to 100%. However you will have other problem if your page is to be bigger than 100%.

    The columns won't equalise and the divs will overflow in Mozilla. While there are ways around this (if you refer to my thread at the top of the page regarding 3 col layouts which has an explanation of 100% height), the best option for two columns like this is to :

    Make your background gif a little wider to include the 2 borders that you have running down the page. Make sure you have the same background colour between the borders as you have on your page.

    Then just apply the image to the body element and repeat it along the y-axis, as you were trying with the left column.

    In this way the colored column will go on forever and it won't matter which column is longest as it will always extend.

    Paul

  3. #3
    SitePoint Enthusiast Redheadskater's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Make your background gif a little wider to include the 2 borders that you have running down the page. Make sure you have the same background colour between the borders as you have on your page.

    Then just apply the image to the body element and repeat it along the y-axis, as you were trying with the left column.

    In this way the colored column will go on forever and it won't matter which column is longest as it will always extend.

    Paul
    Thanks for the suggestion, Paul. I still have a hard time understanding the 100% factor as well as the clear & float properties. Your tips are very much appreciated.
    Lisa
    ~~~~~~~~~~
    Time flies - it's up to you to be the navigator.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I still have a hard time understanding the 100% factor as well as the clear & float properties
    Try to think of 100% as 100% of the parent. If the parent has no height defined then the 100% is 100% of nothing. The html element is the root element and if this has no height set then there is no basis for the 100% height at all. (So specify html,body {height:100%} )

    The next problem is to define what 100% height is?

    Is it 100% of the viewport or is it 100% of the document? What's it to be? It can't be both at thesame time can it? But that's usually what we want .

    IE will define 100% as 100% of the viewport but if the document is longer it will expand to contain the document (content). Ie is really treating height as min-height.

    Mozilla on the other hand will treat height:100% as 100% of the vieport height and any content greater than 100% will overflow the container.

    Therefore mozilla needs a min-height of 100% plus height:auto to allow it to extend. Ie just needs height:100% so therefore this needs to be hidden from mozilla otherwise it will overwrite the height auto definition. (* html #test {height:100%} this will give the height just to ie.)

    Float and clear are pretty straight forward.

    A float is effectively removed from the flow of the document and this presents a problem in placing content underneath a float (and not wrapping around it). This is what clear does. It clears a float and allows content to continue normally underneath the float. (Clear:both will ensure the content starts on a new line. )

    Hope that helps.

    Paul

  5. #5
    SitePoint Enthusiast Redheadskater's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    You are a CSS guru, aren't you?

    Quote Originally Posted by Paul O'B
    IE will define 100% as 100% of the viewport but if the document is longer it will expand to contain the document (content). Ie is really treating height as min-height.

    Mozilla on the other hand will treat height:100% as 100% of the vieport height and any content greater than 100% will overflow the container.

    Therefore mozilla needs a min-height of 100% plus height:auto to allow it to extend. Ie just needs height:100% so therefore this needs to be hidden from mozilla otherwise it will overwrite the height auto definition. (* html #test {height:100%} this will give the height just to ie.)
    Wow, Paul - that was a load, wasn't it? I admit that I do not test on a Mozilla browser so I had no idea how the height property would work there. I know this sounds stupid, but I sometimes forget that I need to "tell" the browser what to do! I went on auto-pilot and assumed the browser would know the height of the body should be 100%.

    Quote Originally Posted by Paul O'B
    Float and clear are pretty straight forward.

    A float is effectively removed from the flow of the document and this presents a problem in placing content underneath a float (and not wrapping around it). This is what clear does. It clears a float and allows content to continue normally underneath the float. (Clear:both will ensure the content starts on a new line. )

    Hope that helps.

    Paul
    It does a little - I am a the type of person that learns by viewing and doing, not by reading and doing. Some people are great at learning from print material - not moi. I've got to find other ways to learn new things.

    I've read quite a few of your posts to others and I want to thank you for your never-ending enthusiasm to help others learn CSS and for not making us feel like complete dorks!

    Lisa
    Lisa
    ~~~~~~~~~~
    Time flies - it's up to you to be the navigator.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I've read quite a few of your posts to others and I want to thank you for your never-ending enthusiasm to help others learn CSS and for not making us feel like complete dorks!
    Thanks

    Things are only easy if you know the answer - I asked the sames questions at first

    Paul


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
  •