How to Make a Div Have a Fixed Size

How to make a div have a fixed size?

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.

Fixed size of div

You need to give the div a fixed height. Try this:

<div style="overflow:scroll;width: 650px; height:100px; font-size: 14px;margin-top: 50px;display:None" id="loader" class="tr-bg tr-internal-frame" onclick='$("#workNow").toggle()'></div>

Here is a Demo for the same.

How can I fill a fixed-size div with a variable-sizep?

This is very simple, just add height: 100% on the class responsible for your paragraph styling. In this case, RadioEpisodeItem

body {  background-color: #4094cf;}.RadioEpisodeItemContainer {  display: inline-block;  vertical-align: top;  width: 20em;  height: 12em;  overflow: hidden;  border: 2px solid black;  border-radius: 10px;  margin: 0.5em;}.RadioEpisodeItem {  height: 100%;  border-radius: 8px;  background-color: tan;  margin: 0em;  padding: 1em;}

<div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>5/02/2009<strong> – Episode: </strong>Intro    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/INTRO.mp3" title="Episode Intro: About SpecialNeeds Lifestyles">            Play</a>    <br />    <strong>Description: </strong>About SpecialNeeds Lifestyles</p></div><div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>3/15/2012<strong> – Episode: </strong>098    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0107.mp3" title="Episode 098: Hospice. Guest: Susan Howard (Carondelet Hospice) and Corinne Spalding">            Play</a>    <br />    <strong>Description: </strong>Hospice. Guest: Susan Howard (Carondelet Hospice) and Corinne Spalding</p></div><div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>2/19/2012<strong> – Episode: </strong>097    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0106.mp3" title="Episode 097: Handi-Dogs. Guest:Veronica">            Play</a>    <br />    <strong>Description: </strong>Handi-Dogs. Guest:Veronica</p></div><div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>2/12/2012<strong> – Episode: </strong>096    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0105.mp3" title="Episode 096: Guest: Mary Mallone">            Play</a>    <br />    <strong>Description: </strong>Guest: Mary Mallone</p></div><div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>2/05/2012<strong> – Episode: </strong>095    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0104.mp3" title="Episode 095: Mastering a Healthy Self Image. Guest: Darrel Knock">            Play</a>    <br />    <strong>Description: </strong>Mastering a Healthy Self Image. Guest: Darrel Knock</p></div><div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>1/22/2012<strong> – Episode: </strong>094    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0103.mp3" title="Episode 094: The Special Needs Store. Guest: Kelly Savage">            Play</a>    <br />    <strong>Description: </strong>The Special Needs Store. Guest: Kelly Savage</p></div><div class="RadioEpisodeItemContainer">  <p class="RadioEpisodeItem">    <strong>Date: </strong>1/15/2012<strong> – Episode: </strong>093    <br />    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0102.mp3" title="Episode 093: Music therapy for people with autism. Guest: Jackie Burger">            Play</a>    <br />    <strong>Description: </strong>Music therapy for people with autism. Guest: Jackie Burger  </p></div>

How to make fixed size div regardless of content

This css:

.thumbnail p {
font-size: 12px;
line-height: 14px;
height: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

will prevent text (sized at 12px, with a line-height of 14px) from overflowing onto a second line.

In the styles above, if you adjust the font-size: and line-height: and height: to suit, your .thumbnail p should then always display as a single line. Whenever the line is too long for the space available, the line will be truncated with ... added immediately after the truncation.

how to create div fixed when resize?

You have two columns, one column you want to keep fixed width and for the other column you want to fill the remaining space and resize the width with the change in screen width.
Well there are many possible ways to achieve this.

I will show you a simple way to do it using the CSS Flex-box.

HTML:

<div class="outer">
    <div class="red"></div>
    <div class="blue"></div>
</div>

CSS:

.outer{
    display:flex;
    min-width:150px;
}
.red{
    background:red;    
    height:100px;   
    flex:1;
    min-width:50px;
}
.blue{
    width:100px;
    height:100px;
    background:blue;   

}

Check it here on fiddle: https://jsfiddle.net/c6a66oge/3/

scale div content to fit a fixed size

Based on @Doug answer, the implemented solution has been replace the statement:

currentExprFront.innerHTML = currentExpr.innerHTML;

with the statements:

const k = 1.25;
const lk = Math.log(k);

function scaleAndCopy( d, o ) {
  /* width and height ratios */
  var h = d.offsetHeight/o.offsetHeight; 
  var v = d.offsetWidth/o.offsetWidth; 

  /* adjust to 1.25^n */ 
  h = Math.pow(1.25,Math.floor(Math.log(h)/lk)); 
  v = Math.pow(1.25,Math.floor(Math.log(v)/lk));

  /* set font size ratio and copy */
  var r = 100*Math.min(h,v); 
  d.style.fontSize = `${r}%`; 
  d.innerHTML = o.innerHTML
}

scale( currentExprFront, currentExpr );

this solution allows a single-step adjustment and keeps the fontSize stable to minor changes in the content, because the possible font size values are not continuous but 100%*1.25^n: ..., 80%, 100%, 125%, 156%, ... .

Fixed size of div element

You can use the overflow: hidden; property, granted that you set a width and height on the div already.

<style type='text/css'>
.text { 
  width: 100px;
  height: 18px;
  overflow: hidden;
  white-space: pre-line; /* breaks up the text on spaces before hiding */
}
</style>
<div class='text'>some really really really long text</div>

How to Make a Div Have a Fixed Size