Make div 100% of height - completely STUCK!

[xProteuSx]

I just cannot, for the life of me, get this to work!  I am trying to make a div height=100% and fill it with a background image.

 

The page in question is as follows:  http://www.neovidamedia.com/work/salveo/about_salveo.html

 

The style sheet is here:  http://www.neovidamedia.com/work/salveo/salveo.css

 

If you take a look, after the header there is a div called 'content'. 

 

Within the 'content' div there are 'content_left' and a 'content_right' divs.

 

'content_right' is the one that I am trying to stretch to 100% height, and to fill it with this semi-transparent graphic:  http://www.neovidamedia.com/work/salveo/images/call_salveo.png

 

Within the 'content_right' div is another div entitled 'content_right_top' which contains some text etc.

 

This idea is to have this call_salveo.png graphic fill any blank space below the 'content_right_top' div for the full height of the page minus the header and footer divs.

 

I can't get this to work except by adding <br /> tags under the 'content_right_top' div, which is nonsense.

 

Thanks.

 

 

[Mahngiel]

Height doesn't work that way.  Floated elements cause many people problems, because people think 100% means 100% of the parent element - it actually means 100% of it's own content.  The Alistapart blog suggests using a "fake" design pattern that uses a 1px by page-width image that tiles vertically to give the illusion of a sidebar that's as long as the main content.

[xProteuSx]

Well, I do appreciate you telling me that it won't work, but as you can see I've figured that much out.

 

There must be a way to do this, and to be able to use an image that is more than 1px wide.  The image I am using must be 330px wide, and at least 300px high. It seems as though others have been able to do it, but I can't figure out, for the life of me, what I am doing different than them.  I have tried their tutorials and advice, but I am obviously doing something different.

[Mahngiel]

You're not doing anything different, except understanding the concept.  And i never said "one pixel wide", i said "1px high".  Let's break it down:

 

You have main container wrapper, your content div (either floated left, or negatively-margined), a floated sidebar, and a clearfix. 

<div id="container">
    <div class="content"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

 

A) Container will expand to meet the needs of the largest element.

B) Sidebar will expand only as high as it's own content.

 

There is no way aside from specific height to tell any element to be taller than it's content.  I mean, you could manipulate this with padding and margins, but that won't accomplish jack for you.

 

On pages where .sidebar is taller than .content, the two will appear the same size due to the clearfix.  However, when .content is taller than .sidebar, there's no way to force .sidebar to be as tall as .content.

 

How do you fake it?  By using a pattern that will repeat vertically.  In your case, because your body bg is being used for .content bg, you can approach this two ways:

 

1) Create a 1x980px image where the first 650px (width of .content) are transparent and the next 330px (width  of .sidebar) are that gray color.

2) Create a 330px image with that gray background color and use background-position: right;

 

Applying this background to the .container will tile it the entire height of your element, giving the illusion that you have two content areas.  Now, your floated sidebar is "as tall" as the content.