How do I set a Fixed Height and Width to a div

Question

I have looked at a lot of questions that have already been asked and can't find and answer that works for me. I am trying to make a logo that has an ampersand in the middle. The Ampersand is supposed to change font familys every few seconds which works. Only issue is that now when it changes font it messes up the who page.

https://codepen.io/anon/pen/BVddWV

Main issues are coming from line 21 in the CSS

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

Any ideas?

Answer 1

Added display: flex on the <b> tag and removed ampersand styles and made it a span instead of a div and added line-height: 1 to it.

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

 $(document).ready(function() { var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz']; var counter = 0; var inst = setInterval(change, 2000); function change() { if (counter > fonts.length) { counter = 0; } font_selection = fonts[counter]; $('.ampersand').css("font-family", font_selection); counter++; } }); 

 @import url('https://fonts.googleapis.com/css?family=Quicksand'); @import url('https://fonts.googleapis.com/css?family=Molengo'); @import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz'); * { font-family: "Gill Sans", sans-serif; margin: 0px; padding: 0px; } body { background-color: #f5f6fa; } #header { width: 100%; padding: 4% 0px 20px 0px; } .logo_text { font-family: "Molengo", sans-serif; font-size: 70px; color: #333; } .ampersand { line-height: 1; display: inline-block; width: 60px; transition: all 1s; } .nav { width: 100%; padding: 25px 0px 25px 0px; } .nav>ul { padding-top: 15px; } .nav>ul>a { text-decoration: none; color: #333; } .nav>ul>a>li { color: #333; font-size: 25px; padding: 20px 30px 20px 30px; display: inline; transition: border 0.1s linear; border: 3px solid #f5f6fa; } .nav>ul>a>li:hover { border: 3px solid #333; } #body { padding-top: 35px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper" align="center"> <div id="header"> <div class="logo"> <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b> </span> </div> <div class="nav"> <ul> <a href="#"> <li>Home</li> </a> <a href="#"> <li>About</li> </a> <a href="#"> <li>Music</li> </a> <a href="#"> <li>Media</li> </a> <a href="#"> <li>Contact</li> </a> </ul> </div> </div> <div id="body"></div> </div> 

Answer 2

You are not able to set fixed hight for inline elements .

And you need to switch to display:inline-block or display:block to transform your elements into block elements .

Also please note, that some elements like <span> or <i> are inline by default, and some like <div> and <p> are block , but you are still able override that behavior (default) via CSS display rule.

In your case (I assume you would like to prevent jumping of your logo text, when ampersand changes font), I would suggest two things:

1. set fixed height to the .logo_text , you could add display:block and max-height: 84px ;
2. set ampersand as span not as div to make your HTML markup more semantically relevant;