CODEWITHSUNDEEP
css
Eric
Eric

Reputation: 97631

How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.

The two columns do not need to be equal in height.

Additionally, I would like to create a 5px gap between the edges of the two boxes.

Is this layout possible without using a table?

EDIT:

Here's a table version to show you the kind of behavior I'm looking for.

Upvotes: 4

Views: 5254

Answers (4)

Paul D. Waite
Paul D. Waite

Reputation: 98846

I think one of my answers on another question solves this:

xHTML/CSS: How to make inner div get 100% width minus another div width

Am I understanding your question correctly?

Upvotes: 3

tereško
tereško

Reputation: 58444

http://innonesen.se/test/l-41-mod/

Ths should do it ( tested only on IE6 and Opera ). Additional feature exist that the main container will stop expanding , when sidebar is less then 100px wide .

http://innonesen.se/test/l-41-mod/no-right.html

P.S. sorry , i cant past URLs .. my rep is too low.

Upvotes: 1

Pat
Pat

Reputation: 25675

Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.

The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.

Upvotes: -1

greg0ire
greg0ire

Reputation: 23255

Yes it is! You can float the first column left, and play with margins to create your gap.

Upvotes: 1

Related Questions