Changing width of div dynamically based on content

Question

I have 3 divs within a div as follows:

    <div id="header">
          <div id="div1">
               <a class="menuSelector">
                    <span class="menuSeletedText">Contacts very long caption xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxyx</span>
                    <div class="menuSelectorButton"></div>
               </a>
          </div>
          <div id="div2"> at CUSTOMER NAME</div>   
          <div id="div3">
               <div>
                    <div id="filterdropdown" class="filterdropdown">
                         <a class="menuSelector">
                              <span class="menuSeletedText">Very long filter Name 12346666666667889999999999999999999999999999999999999910</span>
                              <div class="menuSelectorButton"></div>
                         </a>
                    </div>
               </div>
          </div>
     </div>

enter image description here

Ideally I would like to say that div1 is 30% of the total width and div2 is 30% and div3 is 40%. If for e.g div3 (the div on the right) doesn't occupy 40%, for argument sake takes only 35%, then the remaining 5% is divided equally into div1 and div2. If div3 takes more than 40% then an elipses appears for the overflowing content. Any solution in jquery would be appreciated.

That is a contradicting set of requirements. If the difference is split between div2 and div3, div3 will have width 42.5%, which you don't want (you want to use an ellipsis and truncate content over 40% width). — user1726343
– user1726343, Commented Nov 21, 2012 at 14:10
If the width goes over 40% for the last div then an elipses appears for the content and div remains at 40%. Only if it occupies less than 40%, say 35% then div 3 is 35% and 5% is equally divided between div1 and div2. — chugh97
– chugh97, Commented Nov 21, 2012 at 14:17
If the first div is 35% wide, you said you want the remaining 5% to be divided between the other two. This makes the last div 40 + 2.5 = 42.5% wide, which you do not want. Do you see the contradiction? — user1726343
– user1726343, Commented Nov 21, 2012 at 14:19
@Asad: He means that if the LAST div is 35%, then the FIRST and SECOND div are each 30% plus half of 5% = 32.5%, which adds up correctly. — Blazemonger
– Blazemonger, Commented Nov 21, 2012 at 14:26

Blazemonger · Accepted Answer · 2012-11-21 14:28:22Z

1

I would use CSS as follows:

#div1,#div2,#div3 {
    display: table-cell;
    border: 1px solid blue;
}
#div1,#div2 {
    min-width: 30%;
}
#div3 {
    max-width: 40%;
    text-overflow: ellipsis;
}

This will not give you exactly what you want, but it will probably be close enough. You have some very unrealistic text going on in those divs, so the browser is compensating as best it can.

edited Nov 21, 2012 at 14:28

answered Nov 21, 2012 at 14:18

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing width of div dynamically based on content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related