CODEWITHSUNDEEP
htmlcssweb
Josh Jeffries
Josh Jeffries

Reputation: 3

CSS/HTML Percentage Advice

I have decided to move over to percentages rather than fixed pixels in the hope of minimizing the input for a fully responsive website, but have already encountered and error. I am on the nav bar, and when testing how it looks, the text just overflows off the screen like nothing at all is stopping it! I don't know why I have tried : Putting it in a wrapper, Setting a max width, changing padding, Margin:0 auto;

#nav{
width:100%;
height:10%;
position:fixed;
background:#ccc;
padding-left:10%;
padding-right:10%;
}

Upvotes: 0

Views: 59

Answers (2)

Luke K
Luke K

Reputation: 895

From the looks of it the problem could be your height attribute. I'm assuming the text is spilling down the screen, not off the side of it?

Having a set height is usually a bad idea, especially as percentage heights can be quite irritating to work with. For example, inline elements take their percentage widths and heights from whatever is inside them. If that's the word "hello" then it's 10% of however much of the screen that word would take up.

With responsive design it's usually best to use a percentage for your width and just set height to "auto", or on most browsers you can just not put it in your CSS as "auto" is the default value anyway.

However, for a quick fix that'll stop text spilling out of the box, "overflow:hidden" will hide anything that flows outside of the element.

Upvotes: 1

HaukurHaf
HaukurHaf

Reputation: 13796

You should use box-sizing:border-box, so the total width of the box (including borders, margin and paddings will be 100%).

#nav{
width:100%;
height:10%;
position:fixed;
background:#ccc;
padding-left:10%;
padding-right:10%;
box-sizing:border-box;
}

If you don't use the border-box box-sizing, then the total width of the box will become the specified width + padding + margin + borders.

Read about the box model here: http://www.w3schools.com/css/css_boxmodel.asp

Upvotes: 1

Related Questions