56

I made a site so when you click the button 30px it changes the font inside the div.

I have a ul inside it with the bottons. When I change the size of font the div expands and the nav buttons move with it as well.

How do i make it so it stays fixed but the fonts can still change.

6 Answers 6

77

Try the following css:

#innerbox
{
   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
   display: inline-block;
}

This makes the div take as little space as possible, and its width is defined by the css.

// Expanded answer

To make the buttons fixed widths do the following :

#innerbox input
{
   width:150px; /* or whatever width you want. */
   max-width:150px; /* or whatever width you want. */
}

However, you should be aware that as the size of the text changes, so does the space needed to display it. As such, it's natural that the containers need to expand. You should perhaps review what you are trying to do; and maybe have some predefined classes that you alter on the fly using javascript to ensure the content placement is perfect.

4
  • 1
    This worked for the div that changes the font but now my stupid buttons are still floating :S Jan 25, 2013 at 16:48
  • @MikeCollins I have expanded my answer. Altering the size of the text will make the text flow out of the buttons if they are fixed width - some browsers may still expand them. I think you need to rethink your strategy for what you are trying to achieve.
    – Kami
    Jan 25, 2013 at 16:54
  • 1
    ok, but if I don't know what width I want? I want to remain fix width after first render
    – Alex
    Oct 10, 2017 at 12:25
  • @Alex that is beyond the scope of the original question. Please open a new question as what you are aiming to do differs from the OP.
    – Kami
    Oct 30, 2017 at 11:57
1

you can give it a max-height and max-width in your .css

.fontpixel{max-width:200px; max-height:200px;}

in addition to your height and width properties

1
  • Okay so it works but now the buttons move all over is there a way to make it stay in its spot? Jan 25, 2013 at 16:38
0

Thats the natural behavior of the buttons. You could try putting a max-width/max-height on the parent container, but I'm not sure if that would do it.

max-width:something px;
max-height:something px;

The other option would be to use the devlopr tools and see if you can remove the natural padding.

padding: 0;
-1
<div>
  <img src="whatever it is" class="image-crop">
</div>

 /*mobile code*/
    .image-crop{
      width:100%;
      max-height: auto;
     }
    /*desktop code*/

  @media screen and (min-width: 640px) {
    .image-crop{
       width:100%;
       max-height: 140px;
      }
-3

Use this style

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>
-3
<div class="ai">a b c d e f</div> // something like ~100px
<div class="ai">a b c d e</div> // ~80
<div class="ai">a b c d</div> // ~60 

<script>

function _reWidthAll_div(classname) {

var _maxwidth = 0;

    $(classname).each(function(){

    var _width = $(this).width();

    _maxwidth = (_width >= _maxwidth) ? _width : _maxwidth; // define max width
    });    

$(classname).width(_maxwidth); // return all div same width

}

_reWidthAll_div('.ai');

</script>
3
  • Try to explain your solution.
    – howie
    May 31, 2019 at 23:12
  • What is this $ stuff? Can someone write a readable replacement please?
    – BitTickler
    Nov 2, 2019 at 20:09
  • this is more easy with jquery. i dont want to use document.getElementsByClassName Aug 2, 2020 at 23:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.