0

I have three divs vertically aligned side by side. The first div has a max width but for some reason that div is larger than the content. It is the width set for max-width. I would like for the div to shrink to whatever the width the children dictate.

Here is an example in Code Pen: http://codepen.io/anon/pen/dYPRLX

<div id="exhibition_title_wrapper">
<div id="exhibition_title_name">
<div class="artist_name">Steve Greenberg</div>,
<div class="artist_name">Sarah Thompson</div>,
<div class="artist_name">Bill Bradbury</div>,
<div class="artist_name">Tom Rogers</div>,
<div class="artist_name">Nicole Haight</div> 
<div class="artist_name">Barney Franklin</div>,
<div class="artist_name">Todd Franklin</div> 
</div>
<div id="slash"><img src="http://s9.postimg.org/r1gx8okp7/slash.png"></div>
<div id="exhibition_title_right">
<div id="exhibition_title_title">Expo 3000</div>
<div id="exhibition_title_date">September 1-20, 2017</div>
</div>
</div>

and this is my CSS

#exhibition_title_wrapper {display:block;}
#exhibition_title_name {display: table-cell;
vertical-align: middle; max-width:300px;}
.artist_name {display: inline-block;}
#slash {display: table-cell; vertical-align: middle; padding: 0 10px;}
#exhibition_title_right {display: table-cell; vertical-align: middle;}
#exhibition_title_title {display:}
#exhibition_title_date {display:}

Can anyone please guide me in the right direction?

Jack Cash
  • 129
  • 1
  • 5
  • 18

1 Answers1

0

You have no widths specified on your table cell elements, so standard browser calculations are used to determine width. Since the first column is calculated to be wider than the maximum width you've specified, that acts as a limiter.

More

To acheive what you're after you probably want to use flex box. Unfortunately, it's not supported in IE < 10 and you'll want to use the -webkit prefix for IE 10 and older Android. 

#exhibition_title_wrapper {
  ...
  display: flex;
}
#exhibition_title_right {
  ...
  flex-grow: 1;
}

Demo

Note that I moved the commas inside the divs to retain position. You could add another wrapper element if you need them outside the artist name divs.

One other possibility is to simply float the artist list left, though that doesn't retain the equal-height arrangement you were probably after.

Demo 2

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • I see - thank you. The reason I do not have widths is because this content will be dynamically generated. Is it possible to accomplish what I want in this manner? – Jack Cash Sep 04 '15 at 01:47
  • Thanks for trying. Those don't work. I'm thinking Javascript might do it? – Jack Cash Sep 04 '15 at 02:06
  • Basically I would like it to look exactly as the original demo but without the extra space between the names and the slash. I would like the names to wrap naturally like the do in the original demo rather than stacked in your two solutions. (I believe display: inline or inline-block rather than block is necessary to accomplish what I am looking for.) – Jack Cash Sep 04 '15 at 14:56
  • Thanks for your help -I don't think the flex solution is addressing the situation because It doesn't include a min-width for the wrapper of the artist names and they are stacked on top of another, when I would like them to wrap naturally. Perhaps a flex based solution would work on the #exhibition_title_name? – Jack Cash Sep 04 '15 at 15:10
  • I'm confused. You seem to have just contradicted what's in your question: "I would like for the div to shrink to whatever the width the children dictate." It might be worth rewriting your question to explain more clearly. Let's not continue in the comments. – isherwood Sep 04 '15 at 15:20
  • Thanks - http://stackoverflow.com/questions/32401699/trying-to-shrink-div-with-max-width-to-children-width-but-it-is-the-max-width-v – Jack Cash Sep 04 '15 at 15:32