CODEWITHSUNDEEP
css
1484
1484

Reputation: 63

CSS - 100%px fixes my issue?

I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:

.loc_vendiv{
    position: relative;
    margin-top: 5px;
    left: 0px;
    width: 100%px;
    height: 120px;
    border: 1px solid #333;
    background-color: #fff;
}

The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:

#loc_catlist{
    position: absolute;
    width: 612px;
    height: 720px;
    top: 50px;
    left: 0px;
    background-color: #eee;
    overflow-y: auto;
    overflow-x: hidden;
}

I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...

Upvotes: 0

Views: 61

Answers (4)

Felipe C Vieira
Felipe C Vieira

Reputation: 56

what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.

About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.

The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).

Remember that the border width is added to the size of the object while the padding creates an internal space.

Upvotes: 1

litelite
litelite

Reputation: 2851

Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.

Upvotes: 2

Lauromine
Lauromine

Reputation: 1493

It's because of your border. Try adding : 

box-sizing: border-box;

to your .loc_vendiv class, it will take the border in account.

Upvotes: 3

KnightHawk0811
KnightHawk0811

Reputation: 931

2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).

A fix can be found here from "Paul Irish" about box-sizing

Upvotes: 1

Related Questions