Responsive design to shrink a div when it's sibling's width increases

Question

I am trying to fix a bug with a website where the header contains two elements, a div floated left and a ul floated right.

Normally, the two sit next to each other, but occasionally the content of the ul is large and as the two connect the div stays on the line but the ul drops to the next line. I want to prevent this by sacrificing width on the div and having the text on two lines.

The best I've been able to do so far is to set the width on the left div explicitly in px, but that makes everything two lines when it should only be when it needs to. Every other thing I've tried around display and min/max width hasn't had much affect.

I'll not post the full markup here but it goes a little something like this

<div id="minibasketAndLogin">
    <div id="login"><!--omitted--></div>
    <ul class="basketLoginList">
        <li><!--there are 7 li's in this list--></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</ul>

The css is also rather convoluted so I won't include it here, but the whole thing can be found in this fiddle.

Basically, as the ul stretches, the div should shrink and it's text wrap to the next line.

Thanks

Answer 1

I would do it like this - set the container as table and two elements inside as table-cell, so they will always stay next to each other. For keeping the list items on a single line, set white-space:nowrap; on the ul, and display:inline-block; on the li.

jsfiddle

#minibasketAndLogin {
    display: table;
    width: 100%;
}
#login, .basketLoginList {
    display: table-cell;
}
.basketLoginList {
    white-space: nowrap;
}
.basketLoginList li {
    display: inline-block;
    border: 1px solid;
}

<div id="minibasketAndLogin">
    <div id="login">Login as John Doe</div>
    <ul class="basketLoginList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7 bla bla bla bla bla bla bla bla bla bla</li>
    </ul>
</ul>