CSS Help

[NSA]

Hello,

I am trying to create a box with a header and contents.
The header above the box is way too thick and I'm trying to use the height property but it's just not working. The box containing the header just isn't budging. Here is some of my code:

#header_box{
text-align:center;
border:solid;
border-color:transparent;
background-color:#35B5E8;
width:20%;
height:12%;
border-top-left-rais?dius:15px;
border-top-right-radius:15px;
}
#box_contents{
border:solid;
border-color:#35B5E8;
width:20%;
height:20%;
}

Also, here is a screenshot.

Can anyone help me with this?

 

[tyr0ne]

Any reason of using percentages?

 

[Beast]

Hello,

I am trying to create a box with a header and contents.
The header above the box is way too thick and I'm trying to use the height property but it's just not working. The box containing the header just isn't budging. Here is some of my code:

#header_box{
text-align:center;
border:solid;
border-color:transparent;
background-color:#35B5E8;
width:20%;
height:12%;
border-top-left-rais?dius:15px;
border-top-right-radius:15px;
}
#box_contents{
border:solid;
border-color:#35B5E8;
width:20%;
height:20%;
}

Also, here is a screenshot.

Can anyone help me with this?

I agree you should try using px instead of %

 

[NSA]

Pretty sure when using pixels, people with bigger / smaller screens will see the site differently.

 

[tyr0ne]

Pretty sure when using pixels, people with bigger / smaller screens will see the site differently.

Nope. That basically changes nothing. Go check out random websites and go look at their css. I guarantee you it'll be in pixels unless the website is made to be adjustable.

 

[Markshall]

It's because you set the height to 12%, which means it will inherit 12% of the height of it's parent.

So let's say you have a div called 'div2' inside a div called 'div1' and div1 is 100px in height. You set the height of div2 to 12%, it will then be 12% of 100 which is 12, so the height of div2 will be 12px.

You don't even need to specify the height because it will automatically increase depending on the amount of content you fill it with. If you're adamant about setting a height, set it to auto. height: auto;

 

[NSA]

I'm trying to change the header height which is set to 12%, it changes when I use pixels but the text doesn't seem to move, so the blue box moves up and changes in width but the text stays in the same position rendering it outside of the box.