Search code examples
htmlcssmenuwidthcss-position

div width 100% +10px: relative to parent?

I have a ul/li menu with display:table/table-cell:auto layout, stretched to fill the container and distribute horizontal space between menu items. I have to align an additional UI element to the last menu item. I can achieve this by adding that element as a child of the last li element and making it 100% wide.

However, I need to position this UI element (language selector) partially outside of the main content, so I position this by a relative right:-10px. But the side effect is that the left edge of the selector moves to the right, compared to the menu element. Normally I'd increase the selector div's width by 10px, but since it's 100%, I can't do that. And the parent li's width is determined by its text content.

Is there a way to get this right using pure css? I can't add padding on the selector, because I need its child content to fill the whole div.

<div class="menu">
    <ul>
        <li><a href="#">first</a>
        </li>
        <li><a href="#">second</a>
            <div id="selector">
                <a href="#">EN</a>
                <a href="#">FR</a>
            </div>
        </li>
    </ul>
</div>

Here's a working example: http://jsfiddle.net/hJXng/13/

Solution

  • I'm not sure where xpy's answers have gone, but his/her comments finally made my day. Had to add two wrapper divs, since a div with "display: table" didn't fill the padding in Chrome, while "display: block" did. So absolute positioning a 100% wide block div inside another padded div actually works. 

    #selector-full {
    width: 100%;
    position: absolute;
    display: block;
    right: 0;
}

    Fiddle: http://jsfiddle.net/cPDd6/4/