CODEWITHSUNDEEP
htmlcss
user893856
user893856

Reputation: 1029

Two div next to each other, with full width

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

Upvotes: 3

Views: 6646

Answers (2)

Kyle O'Brien
Kyle O'Brien

Reputation: 952

Hmm

Two parts to this

  1. HTML
  2. CSS for file

HTML

<html>
 <div id='col1'> </div>
 <div id='col2'> </div>
</html>

CSS

#col1 {
 float: left;
 width: auto;
}
#col2 {
 float: left;
 clear: right;
 width: 100%;
}

Explanation Float basically aligns the divs to the left of the viewport (or screen) and clear removes any floating items from the right side of the second column.

This in combination with setting at 100% ensures that your two divs are next to each other and that the first one is only as wide as it needs to be and the second one fills up the rest of the space to the right of the first column.

Upvotes: 3

David Thomas
David Thomas

Reputation: 253396

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.)

Upvotes: 8

Related Questions