Question

I have a structure like this:

<div class='row'>
    <div class='cell'>aaaa</div>
    <div class='cell'>bbbb</div>
    <div class='cell'>cccc</div>
</div>
<div class='row'>
    <div class='cell'>dddd</div>
    <div class='cell'>eeee</div>
    <div class='cell'>ffff</div>
</div>

with the related style sheet:

.cell {
    z-index: 1;
    position: relative;
    float: left;
    width: 82px;
}

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
}

row {
    clear: left;
    position: relative;
    z-index: 1;
}

I would simply that the div above the cursor get resized maintaining fixed the structure of the rest of div.
Thanks!

Answer 1

Try setting a negative right margin of -18px on the hovered cell (100-82=18):

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
    margin-right: -18px;
}

Working example