CODEWITHSUNDEEP
csshtml
JA1
JA1

Reputation: 15

Div Sizing Issue

I'm having issues with the sizing of a <div> that has another <div> inside and an <p> element inside:

HTML:

 <div class="head">

         <div class="head_in">

             <p id="head_title"> BETA 1.7 </p>

         </div>

     </div>

CSS:

.head
{
 width: 100%; height: 20%; background-color: #000000; 
}

.head_in
{
     display: block;
}

#head_title
{
         font-size: 0.6 em; color: red; text-align: right;
}

Outcome: https://i.sstatic.net/hkDQm.jpg

Basically I want to make the div smaller and when I use padding it simply makes it bigger, I have tried changing the height but even at 1% or 90% for that matter it still decides to stay the same, I have also taken out the .head_in div but still nothing. Any help appreciated!

Upvotes: 0

Views: 49

Answers (2)

John Abraham
John Abraham

Reputation: 18781

Height sizes of tags are not inherited like width sizes. You must assign a height for every tag or you must let the content automatically set the height. For 100% height EVERY parent must have 100%. This includes the HTML tag && Body tag. therefore: The answer above missed that the HTML needs a height of 100% also:

HTML

<div class="head">

     <div class="head_in">

         <p id="head_title"> BETA 1.7 </p>

     </div>

 </div>

css

html, body {
 height:100%;   

}
.head
{
 width: 100%; height: 20%; background-color: #000000; 
}

.head_in
{
     display: block;
}

#head_title
{
         font-size: 0.6 em; color: red; text-align: right;
}

JSFiddle I would be careful using the viewport height if your site is going to production. It doesn't work on very many browers yet.

Upvotes: 0

bjb568
bjb568

Reputation: 11488

Height of <body> is not full, while html is always at least viewport height. You can do:

body { height: 100% }

To make percent heights work. Or use viewport heights.

.head { height: 20vh }

Upvotes: 1

Related Questions