0

I have the following arrangements of inline elements in my layout:

***********************************************
*     Div 1      *       Div 2       * Button *
* Dynamic text   *  Some static text *        *  
***********************************************

My problem is that when the content inside div 1 is long the button falls out of place. 

******************************************
*     Div 1           *    Div 2         *         
* A long dynamic text * Some static text *********** 
*                     *                 *  Button *  
****************************************************

The desire effect is to shrink the Div 2's width and make the text to break into two lines.

***********************************************
*     Div 1           *    Div 2     *        *
* A long dynamic text *  Some long   * Button *
*                     *  static text *        *  
***********************************************

How would I go about doing this? Thanks!

La Murga
  • 303
  • 4
  • 15
  • 1
    Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Jun 12 '15 at 14:42
  • 1
    One way to achieve this is to style each div as `display:table-cell`, and follow @Roimer's solution for fitting table cell widths to their content. See http://stackoverflow.com/a/14084773/1241736 – henry Jun 12 '15 at 15:07
  • Thanks for your suggestions guys. I ended up wrapping the divs in a table, and gave the outer elements a width of 1%, and this worked! – La Murga Jun 13 '15 at 18:11

1 Answers1

0

Place all 3 divs in a wrapper. Make the wrapper position: relative. Then make the div with the button have height: 100%.

clickbait
  • 2,818
  • 1
  • 25
  • 61