Question

I want to do the following:

column A, be as width as the maximum listitem | column B, be as width as place left, with having horizontal scrollbox when overleaps.

WIDTH:auto | WIDTH: 100%;

list1   | adklajd lkasjdlk ajs kldajlkjd kalsd 
list222 | sdfsf
list33  | sdfsdffds
        | xxx

how to do this? Its not even easy.

EDIT: http://jsfiddle.net/Y3p9F/
and column B goes to new line, I dont want it

Answer 1

You can use a combination of float and margin to achieve this:

<div id="colA">
    <!-- completely irrelevant mark-up -->
</div>
<div id="colB">
    <p><!-- Completely irrelevant text... --></p>
</div>​

And the CSS:

div {
    padding: 0.2em 0.5em;
}
#colA {
    float: left;
    margin-bottom: 100%; /* to prevent the #colB text wrapping beneath #colA */
}

#colB {
    clear: right;
}

JS Fiddle demo.

(Tested only in Chromium 22/Ubuntu 12.10.)