Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I know there are a million similar articles and I have spent hours trying them all to no avail. I want to be have to have three columns and allow each column to take as much space as necessary but the entire container not to exceed a fixed with (say 500 pixels in this example). The left column must flush left and the right flush right at all times. Often the left and/or right column will be empty and the center should use the entire width.

I can certainly accomplish this with a table with fixed layout or divs with fixed sizes, however, I want to be able to dynamically reuse the same containers to display one, two, or three columns of data and use then entire width available. I can absolutely allow for a fixed with on the contents in col 1 and column 3, though it does not seem to help.

Here is an example:

<div style="width:500px;background:#ff0000;max-width:500px;">
    <div style="background:#00ff00;float:left;display:table-cell;">
          col1
    </div>
    <div style="background:#ff00ff;float:left;display:table-cell;overflow:hidden;text-overflow:elipsis;white-space:nowrap;">
          REALLY LONG DO NOT EXCEED 500 - WIDTH COL 1 AND COL2 SOMEHOW WOULD BE NICE
    </div>
    <div style="background:#00ffff;display:table-cell;float:right;">
          col3
    </div>
</div>

Sorry, cannot show the output of the above since it will not allow me to post an image.

share|improve this question
2  
You can't post an image, but you could link to a jsfiddle... ? – Richard JP Le Guen Sep 19 '12 at 18:20
So in other words, you want a three column grid, but if one column doesn't have any information in it, then it should hide and the other two columns take up that extra space? – bspymaster Sep 19 '12 at 18:24
You may want to think about using a div wrapper around the column divs, because then, you can set the outside div to be 500px, and the inner div columns to just be percentages of that wrapper. – bspymaster Sep 19 '12 at 18:27
Should have used jsfiddle. Thanks to bspy for the suggestions. I think I need to take the time to further understand this link which is constantly mentioned for this issue and seems to be the answer after further consideration. – Jason P. Sep 19 '12 at 18:36
Actually the link I mentioned does not allow for the content to dictate the width of the side columns - it used fixed sizes. @bspymaster - you mention using each column as a fixed percentage of the the outer - however, that is exactly what I am trying to avoid. I do not want to have to set widths for the columns. I want them to expand to their content which could vary greatly. – Jason P. Sep 19 '12 at 18:49

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.