CSS: 3 columns layout, left dynamic full width, center & right auto content width [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

I need to do next thing:

   max-width to center     content auto width    content auto width
<-----------------------><--------------------><-------------------->
          left                  middle                right

SO the middle/center column and right column are going to have content inside and are going to width grow automatically. But the left one, I need to be as wide as it can until snaping to middle one.

What I have right now, it's middle and right, with "float: right". And left one, with "float: left".

But with this, left col its width limited.

How do I make it as wide as possible?

Answer 1

As far as I'm aware, this can only be done using display: table. If I understood right, this is what you want. It makes the divs act as table cells, and sets the left one to width of 100%, automatically filling any spare space.

Answer 2

Have them all floating left.. That way they all "lean" on the left col with the max width.

Also you will need a few width considerations or clear conditions..

This will clear up a lot for you

Answer 3

Try this:

http://jsfiddle.net/vcw7Q/

done just using 50-24-24 percent...

HTML

<div id="divLeft">
    div left to center
</div>    
<div id="divRight1">
    div right 1
</div>    
<div id="divRight2">
    div right 2
</div>    

CSS

#divLeft{
    width: 50%;
    display: inline-block;
    background-color: forestGreen;
}
#divRight1{
    width: 24%;
    display: inline-block;
    background-color: blue;
}
#divRight2{
    width: 24%;
    display: inline-block;
    background-color: red;
}