CODEWITHSUNDEEP
csshtmlfixed
Mike Collins
Mike Collins

Reputation: 655

How to make a div have a fixed size?

I made a webpage, on which clicking the button 30px changes the font inside the div.

I have a ul inside it with the buttons. When I change the font size, 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.

Upvotes: 63

Views: 356852

Answers (6)

Mike
Mike

Reputation: 781

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

Upvotes: 4

Kami
Kami

Reputation: 19457

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.

Upvotes: 85

Korkut Hacı
Korkut Hacı

Reputation: 5

<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>

Upvotes: -3

Bharath Kumar
Bharath Kumar

Reputation: 860

Use this style

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>

Upvotes: -2

Shailesh kala
Shailesh kala

Reputation: 1872

<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;
      }

Upvotes: 0

Matt Steele
Matt Steele

Reputation: 655

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;

Upvotes: 0

Related Questions