Responsive design to reduce div while increasing width of marriage

Question

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

Usually two sit next to each other, but sometimes the contents of ul large, and since they connect the div, it remains on the line, but ul falls to the next line. I want to prevent this by sacrificing width on a div and having text on two lines.

The best I have been able to do so far is to set the width of the left div explicitly in px, but this does all two lines when it should be only when necessary. Everything that I tried to show, and the minimum / maximum width, did not affect much.

I will not post the full markup here, but it is a bit like this

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

Css is also quite confusing, so I won’t include it here, but all of this can be found in this fiddle .

Basically, as ul stretches, the div should decrease, and the text wraps on the next line.

thanks

Answer 1

I would do it this way: put the container as table and two elements inside the table-cell so that they always stay next to each other. To save list items on one line, set white-space:nowrap; on ul and display:inline-block; on 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>