CSS - displaying a dynamic height floated DIV - missing background image

Question

My Goal:

Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.

I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.

When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.

Some pertinent CSS:

  .sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
  .sccontainer .parent { position: absolute; width: 270px; }
  .sccontainer .image { margin: 5px; float: left; }
    .sccontainer .image img { width: 48px; }
  .sccontainer .icon { margin: 0; }
  .sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
  .sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
    .sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
  .sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
  .sccontainer a:hover { text-decoration: underline; }

.sccontainer.hover { height: 250px; }
  .sccontainer.hover .content { height: auto; }
    .sccontainer.hover .content p { min-height: 135px; max-height: none; }

jsFiddle:

Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...

http://jsfiddle.net/ztMM5/1/

And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.

NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(

What I've Tried/Researched:

I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.

I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.

I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.

I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.

Answer 1

This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)

I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :

<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->

    <div class="sccontainer"><!--position relative-->
        <div class="inner"><!--position absolute-->
            <div class="content"><!--position relative-->
                <!-- my content here -->
            </div>
        </div> 
    </div>
    <!-- more containers etc-->

</div><!--END wrapper-->

First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):

.cf:after {
    visibility:hidden;
    display:block;
    content:"";
    clear:both;
    height:0
}
* html .cf {
    zoom:1
}
/* IE6 */
 *:first-child+html .cf {
    zoom:1
}

Then the style for the .sccontainer container :

.sccontainer {
    width: 280px; /* or whatever - could be % for responsiveness */
    padding-bottom:200px; /* any value to give height without using height ;) */
    position: relative;
    float: left;
    margin: 5px 10px; /* or whatever */
    overflow: hidden; /* this is important to keep all same height and big content out of sight */
    z-index: 1; /* this is important too, see later */
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}

Then the .inner container, which actually will help to keep the layout in order if we hover the elements

.inner {
    position: absolute; /* please don't move */
    width: 100%; /* to fill the whole parent container */
    height: 100%; /* same */
}

And the content :

.content {
    position: relative;
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
    width: 100%; /* helps to fill the gaps with small content */
    height: 100%; /* same, specially if using image backgrounds */
    /* other styles, etc */
}

NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency

Now, what happens when we hover ?

.sccontainer:hover {
    overflow: visible; /* show the full content */
    z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}

.sccontainer:hover .content {
    height: auto; /* as it really is, including background image */
}

NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like

<div class="sccontainer withhover">

and apply the hover effects only if that class exist like

.sccontainer.withhover:hover {
    overflow: visible;
    z-index: 999;
}

... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :

jQuery(document).ready(function ($) {
    $(".sccontainer").hover(function () {
        var $contentHeight = $(this).find(".content").height();
        if ($(this).innerHeight() > $contentHeight) {
            $(this).removeClass("withhover");
        }
    });
});

See JSFIDDLE