Border-width screwing up content

HTML & CSS
1

So I recently changed my border source and width to 38x38 which is relatively large and it screws up the content. The background of the border is transparent of course and it looks like it’s padding. Is there a way to get negative padding as it is not possible, is there a workaround?

2

I found a proper solution selecting every div inside and giving it a negative margin.

3

That was NOT a “proper” solution.
Bad band-aid.
Look forward to more problems.

4

Then tell me a proper one.

5

Please post a URL to the site so we can look at the html and css. That will be a huge help.

If you still have a copy of the css without the negative margins, that would be ideal!

6

Site is locked with a password, it isn’t hard to try it yourself. Just make a border-image.

7

Assuming this border goes around the entire page, why not use:


border-right:38px solid transparent;
border-bottom:38px solid transparent;
border-left:38px solid transparent;

Are transparent images necessary?

8

Why not just use padding or margin? We really need to see this in context. You could post example code if you can’t post a link, so that we can see this in context.

9

If you us outline instead of border it will not affect your layout.

10

The border is for parts in the container.

Here’s the CSS code, the margins and HTML example I use atm:
HTML:


<div id="container">
	<div id="left">
		<div id="something">
			Hello world!
		</div>
	<div id="right></div>
</div>

CSS:

#container {
	color: #B8B8B8;
	font-family: MuseoSans500, Arial, 'Times New Roman', serif;
	width: 1047px;
	height: auto;
	margin: 10px auto;
	
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
	#container #left, #container #right {	
		border-width: 38px;
		
		-webkit-border-image: url("../img/borders/container.png") 38 38 repeat;
		-moz-border-image: url("../img/borders/container.png") 38 38 repeat;
		-o-border-image: url("../img/borders/container.png") 38 38 repeat;
		border-image: url("../img/borders/container.png") 38 38 repeat;
		
		background-color: #1c1913;
	}
	#container #left > div, #container #right > div {
		margin: -20px -20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}

Image:
11

OK, given what you’ve osted. could you explain what you are trying to do here? I still can’t work out what the issue is. Could you post the background image too?

12

I solved it, thanks anyway.

13

Would you mind telling us how you solved it? in case we see the same situation again.