css: expand div on hover without displacing other divs

Question

I have the following code :

<style>
    #items {width:300px;}
    .item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;}
    .item:hover{height:auto}
</style>

<div id="items">
    <div class="item">text 1<br>text 1<br>text 1</div>
    <div class="item">text 2<br>text 2<br>text 2</div>
    <div class="item">text 3<br>text 3<br>text 3</div>
    <div class="item">text 4<br>text 4<br>text 4</div>
    <div class="item">text 5<br>text 5<br>text 5</div>
    <div class="item">text 6<br>text 6<br>text 6</div>
    <div class="item">text 7<br>text 7<br>text 7</div>
    <div class="item">text 8<br>text 8<br>text 8</div>
    <div class="item">text 9<br>text 9<br>text 9</div>
    <div class="item">text 10<br>text 10<br>text 10</div>
</div>

see it in action : http://jsfiddle.net/6K7t4/

when a div id hovered, it should expand without displacing other divs as shown at : http://shopping.kelkoo.co.uk/ss-shirt.html

Also, please suggest how to achieve a cross-browser solution.

If it can be done using pure css, I prefer that solution.

If not, can it be done using jquery in an easy way without plugins?

Answer 1

You can use the child selector element by adding another div with the class you would like to select. Here is your code updated below using it. Hope this helps!

<div id="items">
    <div class="item"><div class="item-extend"> 1<br>text 1<br>text 1</div></div>
    <div class="item"><div class="item-extend"> 2<br>text 2<br>text 2</div></div>
    <div class="item"><div class="item-extend"> 3<br>text 3<br>text 3</div></div>
    <div class="item"><div class="item-extend"> 4<br>text 4<br>text 4</div></div>
    <div class="item"><div class="item-extend"> 5<br>text 5<br>text 5</div></div>
    <div class="item"><div class="item-extend"> 6<br>text 6<br>text 6</div></div>
    <div class="item"><div class="item-extend"> 7<br>text 7<br>text 7</div></div>
    <div class="item"><div class="item-extend"> 8<br>text 8<br>text 8</div></div>
    <div class="item"><div class="item-extend"> 9<br>text 9<br>text 9</div></div>
    <div class="item"><div class="item-extend"> 10<br>text 10<br>text 10</div></div>
</div>

​

 #items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;}
.item:hover >.item-extend {position:absolute;width:100px;background:#fff;}

You can demo the updated code here : http://jsfiddle.net/6K7t4/35/

UPDATE: you dont even have to use the child selector element, instead you can just change it on :hover by switching out .item:hover >.item-extend with .item-extend:hover. Works the exact same way.

Answer 2

See this demo: http://jsfiddle.net/6K7t4/24/

HTML:

<div id="items">    
    <div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div>
    <div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div>
    <div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div>
    <div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div>
    <div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div>
    <div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div>
    <div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div>
    <div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div>
    <div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div>
    <div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div>
</div>

CSS:

#items { 
     width:300px; 
}

.item { 
    width:100px; 
    border:solid 1px #ccc;
    float:left;
    height:20px;
    z-index:0;
    overflow:hidden;
    position:relative; 
}  

.item:hover {
    overflow:visible;
    z-index:100;
}

.item:hover .inner { 
    z-index: 100;
}

.inner { 
    position: absolute;
    background: white;
    width: 100%;
}

Each .item is now positioned relatively and has new child which wraps all content inside it. Once div is hovered, .item's overflow:hidden is changed to overflow:visible and z-index of .inner is set to 100 (in order to show it above other divs).

UPD: New demo and updated code. For IE7 (z-index is changed for .item:hover, otherwise inner div is hidden below other .items in IE7)