Home/ Questions/Q 6957277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:58:48+00:00

I would consider myself to be an intermediate/advanced CSS/HTML coder but I’m stumped on

  • 0

I would consider myself to be an intermediate/advanced CSS/HTML coder but I’m stumped on how to do the following scenario.. I’m starting to think it is impossible but I really want to believe it is..

Let’s say the wrapper width is 1000px.

Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..

Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?

Graphic of what I am trying to accomplish:

https://i.stack.imgur.com/cMuBP.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Good ‘ole tables to the rescue:

    http://jsfiddle.net/hgwdT/

    Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:

    http://jsfiddle.net/XXXdB/

    The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.

    I also confirmed that this solution works in IE8 and FF, in addition to Chrome.

    • 0