Xenidious Xenidious - 4 months ago 22
CSS Question

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 html structure:

<div class="menuBar">
<div class="menuOptionWrap">
<div class="menuOptionInside">
<p class="menuText">Test 3 </p>
</div>
<a href="test3.html">
<span class="panelLink"></span></a>
</div>
<div class="menuOptionWrap">
<div class="menuOptionInside">
<p class="menuText">Test 2</p>
</div>
<a href="test2.html">
<span class="panelLink"></span></a>
</div>
<div class="menuOptionSelectedWrap">
<div class="menuOptionSelectedInside">
<p class="menuText">Test 1</p>
</div>
</div>
</div>


The CSS:

.menuBar{
float: right;
width: 50%;
height: 100%;
margin:auto;
background-color: black;
}

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

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

.menuOptionInside{
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}

.menuOptionSelectedInside{
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}

.panelLink{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}


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

Answer

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%;
}
Comments