CODEWITHSUNDEEP
htmlcss
user3183812
user3183812

Reputation: 3

CSS Divs won't fit without a border

I have an error with my HTML/CSS that I would like to solve. I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.

body {
    background-color: #574B59;
}
.header {
    height: 87px;
    width: auto;
    border: 4px solid black;
    margin: 20px;
    background-color: white;
    text-align:center;
    font-size: 20px;
}
.links {
    height: 25px;
    width: auto;
    border: 3px solid black;
    margin: auto;
}
.body{
}
.subheader{
}
.linkss {
    width: 10%;
    height: 25px;
    float: left;
    text-align:center;
    background-color:#06C;
    border: 1px solid black;
}

Look at .Linkss

Upvotes: 0

Views: 104

Answers (6)

nightowl
nightowl

Reputation: 41

One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element. 

.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}

Tested in FireFox.

The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.

Upvotes: 0

Cam
Cam

Reputation: 1902

One solution is to set a negative margin of 1 pixel on your linkss see example below

.linkss {
    margin: 0 -1px 0 -1px;
    width: 10%;
    height: 25px;
    float: left;
    text-align:center;
    background-color:#06C;
    border: 1px solid black;
 }

I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!

Upvotes: 0

mikevoermans
mikevoermans

Reputation: 4007

.linkss {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* plus all your other properties here*/
}

Upvotes: 0

knrz
knrz

Reputation: 1811

Add this to the CSS for the divs:

.linkss {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 10%;
  height: 25px;
  float: left;
  text-align:center;
  background-color:#06C;
  border: 1px solid black;
}

Or you can set the width to calc(10% - 2px).

Upvotes: 0

bboysupaman
bboysupaman

Reputation: 1334

Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px. 

box-shadow: 0px 0px 1px #000000;

Upvotes: 1

Leeish
Leeish

Reputation: 5213

The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.

Upvotes: 0

Related Questions