Help a newbie out with borders

[Arvid]

Hey guys, I’m new here, and also rather new to CSS and even webdesign in general. I am trying to make a website where one box is aligned to the left, one in the middle and one to the right. This works very well until I try adding a border, because the border causes a line break so that one of the boxes are one row below the two others. This is the code:

#left

{

background-color: #000;

width: 20%;

position:relative;

float: left;

margin-right: 10%;

border: 2px solid #CCC;

color: #FFC

}

#middle

{

background-color: #000;

width: 20%;

position:relative;

float: left;

margin-left: 10%;

margin-right: 10%;

border: 2px solid #CCC;

color: #FFC

}

#right

{

background-color: #000;

width: 20%;

position:relative;

float: left;

margin-left:10%;

border: 2px solid #CCC;

color: #FFC

}

I apreciate any help and apologise for my bad english.

[PeretzM]

I’m not an expert or anything, but it seems to me like there is no room for the borders, because you are using up 100% of the width in your boxes and margins. Keep in mind, browsers ADD the border width to the size of the box, so a 20% box plus 2px border is really 20% plus 4px wide.

Solution: reduce margin width or reduce box width.

[Arvid]

Yeah, i realised that, but i’d still like to use the borders and being able to ahve the boxes aligned the same way they are anyway. Thank you for the comment and the information.

[TT_Mark]

Following on from what @PeretzM said, I think it’s actually slightly more complicated than that, in the fact the browsers actually do different things. I’m pretty sure that some differ between adding the border to the width, or keeping the same width and adding the border internally…

But the solution recommended still stands!

[yoboubdir]

You can use extra div inside your “left, middle, right” div, and apply border to inner div, i hope this help

left









middle









right

[TT_Mark]

@yoboubdir You can sort it out properly without extra divs. Using unnecessary divs is bad practice

[Chris Coyier]

If you have a wrap, make the width bigger or reduce the border box’s width. I had an issue similar to this on my footer.

Also, do you have a link you can post?

[noahgelman]

Without using nested divs, you can use box sizing: https://css-tricks.com/box-sizing/
Only good for Safari, Chrome, Firefox, Opera, and IE8+. So if you’re not worried about IE7 and lower, there’s your answer

[Arvid]

Wow thanks a lot for the help! I’ll see if I can make this work.

[Author]

Posts