Question

I have a button made up of three divs the middle one strecthes out like holy grail style. my problem is in google chrome the picture on the right div goes out of the parent container and is missing the end on the right by 1 or two pixels it doesn’t look good. I’ve tried making the right side z-index 100 tried descreasing the right margin and increasing it but doesn’t matchup with the spacing around the button it goes out of wack. it looks fine in IE Can you suggest any other css I could try. below is my layout

<div class="container">
    <div class="menu-item">
        <div class="item-left"></div>
        <div class="item-middle">Text Goes Here</div>
        <div class="item-right"></div>
    </div>
</div>

Answer 1

Try this Code :

<div class="container">
    <div class="menu-item">
        <div class="item-left" style="float:left">Left Text</div>
        <div class="item-middle" style="float:left; margin-left: 60px;">Text Goes Here</div>
        <div class="item-right" style="float:left; margin-left: 60px;">Right Text</div>
    </div>
</div>

See this for example.

Correct me if I am wrong.