CODEWITHSUNDEEP
htmlcssbordermargin
x3nr0s
x3nr0s

Reputation: 2156

HTML/CSS - Phantom Margin which I can not find

I'm creating a menu bar on my website. My issue is that there is a small margin at the side of one of my menu items. (I have highlighted this by adding background-color: black; to the container.) I am using safari.

margin issue

The CSS:

.testMenuOption{
  width: calc(100%  /3);
  height: 100%;
  float: left;
  margin:auto;
  background-color: white;
  display: table;
}

Can somebody tell me what my issue is? I have tried removing the text and it is not the issue.

Upvotes: 1

Views: 317

Answers (2)

chabha
chabha

Reputation: 29

I'm not sure what you say,that black line change when window resize.check your css, width: calc(100% /3); change the value 3,you will get idea.

Upvotes: 1

Fabian S
Fabian S

Reputation: 113

Since you calculate the width by using 100/3, there will be rounding errors, where as a result the widths wont add up 100% again. What you can do to fix it is to set the width of two of the .menuOptionsWraps to 33% and one to 34%.

For example by doing so:

.menuOptionSelectedWrap {
    float: left;
    width: 33%;
    height: 100%;
    margin: auto;
    margin-right: -4px;
    background-color: #d6eef2;
    display: table;
}
.menuOptionSelectedWrap:last-of-type {
    width: 34%;
}

Upvotes: 4

Related Questions