Border not showing due to wildcard

Question

Here is my fiddle:

And here is the problem:

* {
margin:0;
padding:0;
overflow:hidden
}

I need to use this for the rest of my site. So I cannot remove it. However, on my fiddle, I want the border to show also on the right, but now because of the above, it doesn't. I would like to have a solution where I can keep the above code, however, if not, I will have to review my whole site and re-do the CSS, I guess. I haven't been able to get the border on the right without removing that wildcard code though. Anyone?

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

You can add box-sizing:border-box; to your list of wildcard rules:

* {
    margin:0;
    padding:0;
    overflow:hidden;
    box-sizing:border-box;
}

jsFiddle example

Bootstrap actually does this and you can read more here.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 15 '15 at 16:54

j08691

204,283
31
260
272

score 1 · Accepted Answer · answered Jul 15 '15 at 16:57

1

The actual width of .rightcont is 328px including 1px border on left and right.

So either increase width of .right to 328

Or add box-sizing: border-box; to .rightcont

answered Jul 15 '15 at 16:57

Felix A J

6,300
2
27
46

I seriously checked and tested that before and I didn't get it to work. Now, it works with the width change though. Thanks :) – Hardist Jul 15 '15 at 17:55

Border not showing due to wildcard

2 Answers2