0

Situation: I have 3 div's |left|center|right| I have 3 other divs inside left and 3 other inside right. When I pass in any of this 6 divs, they increase width. The right side is ok, but the left side, when it grows, is still behind the center div.

Is more easy too see: Pass the mouse over left menu, and you still see the text in the center div. This behavior do not happens on the right side.

    <div class="wrapper">
        <div class="menu_left">
            <div class="item_left"> </div>
            <div class="item_left"> </div>
            <div class="item_left"> </div>
        </div>

        <div class="central">XXXXXXXX XXXXXXX</div>

        <div class="menu_right">
            <div class="item_right"> </div>
            <div class="item_right"> </div>
            <div class="item_right"> </div>
        </div>
    </div>
<script>
    //$("div").fadeIn(3500);

    $(".item_left").mouseenter(function() {
        $(this).animate({ width: "240px"}, 350);

    });
    $(".item_left").mouseleave(function() {
        $(this).animate({ width: "100px" }, 350);
    });
    $(".item_right").mouseenter(function() {
        $(this).animate({ width: "240px"}, 350);
    });
    $(".item_right").mouseleave(function() {
        $(this).animate({ width: "100px" }, 350)
    });
</script>

http://jsfiddle.net/lcssanches/E7B3t/1/

EDIT:

Left menu: I want avoid this
left_menu

Right menu: correct!
roght_menu

lcssanches
  • 995
  • 12
  • 33
  • 2
    does for me. u sure ur original is correct? also, u might want to consider going to css3 when u can. less lines. better performance. some stuff still doesn't work well like using `auto` `height`s and `width`s –  Mar 19 '13 at 03:11
  • ok, I will look more about css3. but see the images pls. – lcssanches Mar 19 '13 at 03:23

1 Answers1

3

Judging by your CSS code below, it appears you're wanting the left/right items to cover the central div, only your mistake is a spelling one - postion: should be position:

div.menu_left,div.menu_right{
  postion: relative;
  margin:0;
  padding:0;
  display:inline-block;
  width: 100px;
  height: 100%;
}

See http://jsfiddle.net/E7B3t/3/

Cue
  • 2,699
  • 1
  • 12
  • 13