Fluid width HTML list item using CSS

Question

Is it possible to create a fluid width LI with background imaage that adjusts its size based on content and doesn't follow the width of a parent DIV.

If possible, using only CSS.

        <div id="navbody">
            <!--Button Start-->
            <ul id="button">
            <li>
            Home
                <div class="btnright"></div>
            </li>
                            <li>
            About Us
                <div class="btnright"></div>
            </li>
            </ul>
            <!--Button End-->
        </div>

LI contains a background:

NOTE: this has an irregular left shape

Then a DIV is used to end the irregular right shape

The menu is contained in a parent div with a fixed width [ ]

[[ Home ] [ About Us ] ]

As you can see, I want the LI's to auto adjust based on content.

Answer 1

Hello,

Oh. I didn't understand your question properly until you posted the code sample.

Here's a mock-up:

<div style="width: 500px;border: 1px solid Blue;">
    <ul style="padding-left:0;margin-left:0;">
        <li style="list-style-type: none;">
            <div style="float:left; height:24px;width:20px;background-color:Green;"></div>
            <div style="float:left;height:24px;background-color:Yellow;">Some content here</div>
            <div style="float:left; height:24px;width:20px;background-color:Red;"></div>
            <div style="clear:both;">
        </li>
        <li style="list-style-type: none;">
            <div style="float:left; height:24px;width:20px;background-color:Green;"></div>
            <div style="float:left;height:24px;background-color:Yellow;">Some other content here</div>
            <div style="float:left; height:24px;width:20px;background-color:Red;"></div>
            <div style="clear:both;">
        </li>
    </ul>
</div>

The green div is your left part of the image, the red one is your right part of the image and the yellow one is your repeating center of the image. To do this you should slice your image into these 3 parts and add them as backgrounds for the 3 divs. Just fiddle with the dimension to make it suite your desired output.

Hope this helps, Alin