Right-Floated Menu Not Flush With Div Container

Okay, here’s the issue: I’m floating a nav menu right with the goal of it being flush with the right side of it’s container. However, no matter what I’ve tried, the menu is still off by a pixel or less. I’m using a reset.css file, Response Grid System’s 12 column css file, and my own styling css file, of course.

Any help or insight is greatly appreciated! I’m pulling my hair out over this one.

The code is here: http://codepen.io/anon/pen/rKBnt . ( Simplified as much as possible. ‘Line 210 is where the nav menu css is’

*Note: To replicate the problem, make sure the view is wide enough that the blue background appears on both sides of the white container. Then hover your mouse over the Contact link. You should see that it is off ever so slightly.

You can float the list items to the right. That should bring you peace and joy. :slight_smile:

Browsers tend to round fractional pixel values down to prevent overflowing a limited width container.

Hi ronpat, thanks for the reply. Floating the li elements right produces the same results. But following up on that rounding of fractional pixels. I changed the column widths so that every column width is now a whole number (e.g. 70 and 30 vs 67.6666 and 33.3333 ). This actually made a difference, but for some reason there is still a slight gap. I’ve updated the code to demonstrate.

This is the code that should be changed.


li {
	height: 100%;
	width: 33.33%;
	float: [color=red]left[/color];   /* change to "[color=blue]right[/color]" */
	border: none;
	text-align: center;
	}

You will have to reorder the list items in HTML to restore the order.

I guess it’s possible that I’m looking at the wrong thing.

BTW: 70 - 30 vs 66.6666 - 33.3334 doesn’t matter. They are both units of percent which the browser has to translate to pixels to render in the viewport.

Sorry I forgot to include the actual link to the code. It appears to be the same link, but the code has been updated. http://codepen.io/anon/pen/rKBnt I had tried floating right previously. It’s hard to distinguish but there is still a slight gap. And thanks for taking the time to help, it’s much appreciated.

OK. New code. I don’t see a pixel jog at the right end of the menu. I’m using Firefox. What’s your browser?

I’m gonna take a guess that you are using Opera (or maybe this is a webkit thing).

I don’t know what the real fix for this issue is, but I managed to find a hack that doesn’t seem to bugger up FF, Chrome, or IE8.


ul {
    width: 50%;
    height: 5em;
    float: right;
    overflow: hidden;
    [color=blue]margin-right:-0.1px;    /* add me */[/color]
}

If you give it a try, I’d be interested to hear what you see.

Okay, it seems that when I changed the column widths to whole numbers that actually resolved the issue. It’s also become evident that I’m going crazy. I zoomed in on multiple browsers and sure enough the pixels line up perfectly. It must just be tricking my eyes at this point. Thank you so much for the help! I needed that second set of eyes.

The pixel jog is browser width dependent. Sometimes you see it, sometimes you don’t. Change with width of the viewport and it will come and go. You’re not going crazy and changing the widths to whole numbers did not affect the issue. It’s still alive and well in Opera… and Chrome. :slight_smile: IE8 and Firefox get it right.

Your to compounded rounding errors. Actually it’s not so much the frame work but, as mentioned by Ronpat the use of percentages for element sizes will lead to pixel errors on some browsers. This of course is compounded if you have nested elements with their own pixel errors.

This is a technique I use, when possible, to eliminate that effect.


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">ul, li , p { margin: 0; padding:0;}
		.nav li {float:right; width: 33.33333%; list-style: none;  background: #ccc;}
		.nav {width: 50%; float: right; outline:1px solid green;  }
		div {border: 1px  solid red; background: pink; overflow: hidden}
		li:hover{ background: orange}
		.nav a { display: block; padding:10px; }
 
				li:last-child{ float: none; width: auto; overflow: hidden; } 
		</style>
	</head>
	<body>
	<div>
<ul class="nav">
	<li><a href="#">first item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">itemLAST </a></li>
 </ul></div>
	</body>
</html>


Essentially, you are unfloating the last element in the row, giving it overflow:hidden; and width:auto;

hope that helps

That’s the method I advocate also as it cures the pixel gap completely. The last non floated element will stretch to fill the available space on the line automatically. The overflow:hidden creates a rectangular block next to the float (almost like a float) and removing the width allows the element to stretch to the end of the line perfectly (note that ie7 and under would need haslayout to achieve the same effect).

Most grids suffer from this ‘gap’ problem (even bootstrap) because they deal with floated columns and percentages and must round up or down depending on the viewport width. You thus end up with ridiculously long decimal point numbers in an effort to minimise the effect but having 4 or more decimal numbers is usually a sign that something is wrong with the concept.

Some browsers will keep a running total of all the rounding in an effort to minimise the gap and others are not quite so good so you get variances between browsers. Opera used to be the worst offender and would not honour a fraction of a percent at all but luckily the modern versions are ok now although they will still have rounding errors.

Therefore if you want a seamless join between columns then don’t use a grid. Come out of the grid and use a technique such as in Dresden’s post above.

Thanks for the informative response guys! I had a feeling it was the percentages causing grief. I will try to implement dresdens technique, so far I’ve managed to make it significantly less noticeable. It’s good to know what causes the gap so that I can prevent it in the future.

Hi, katten,

You can implement @dresden_phoenix (and @Paul_O_B)'s technique by doing this:

Add this code to your local stylesheet (make the selector more specific if necessary to override the “col” and “span_10” styles):


.test {
    float:none;
    overflow:hidden;
    zoom:1.0;
    width:auto;
}

Then add the class “test” as shown in blue:


<div class="container">
    <div class="row" id="row1">
        <div class="col span_2">
            <div class="logo">Logo</div>
        </div>
        <div class="col span_10 [color=blue]test[/color]">
            <div class="nav-col">
                <ul id="nav">
                    <li><a class="active" href="#">Intro</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <a href="#" id="pull">Menu</a>
            </div>
        </div>
    </div>
    <div class="row gutters" id="row2">
        <div class="col span_9"></div>
        <div class="col span_3"></div>
    </div>
</div>

In this way, you can see it fix the pixel jog and decide how you want to merge it with your code.

Thanks ronpat, for your continued help.

Below is how I implemented it:


div.col.span_9.test {
	float: none;
	overflow: hidden;
	zoom: 1.0;
	width: auto;
}

li:last-child {
	float: none;
	width: auto;
	overflow: hidden;
}


<div class="container">
	<div class="row" id="row1">
		<div class="col span_3">
			<div class="logo">Logo</div>	
		</div>
		<div class="col span_9 test">
		    <ul id="nav">
				<li><a href="#contact">Contact</a></li>
				<li><a href="#folio">Portfolio</a></li>
				<li class="test"><a href="#intro">Intro</a></li>
			</ul>
			<a href="#" id="pull">Menu</a>
		</div>
	</div>

Unforunately this does not eliminate the pixel gap. Unless I’m implementing it incorrectly which is also possible.

katten, I’ve repeated the tests and the following colored items seem to matter. Paul’s fix seems to depend on floating the list items to the right. Nothing more. No need to apply the “test” fix to the last list item.


li {
	width:33.33%;
	height:100%;
	float:[color=blue]right[/color];
	border:none;
	text-align:center;
}
.test {
	float:none;
	overflow:hidden;
	zoom:1.0;
	width:auto;
}


<div class="container">
    <div class="row" id="row1">
        <div class="col span_3">
            <div class="logo">Logo</div>
        </div>
        <div class="col span_9 [color=blue]test[/color]">
            <div class="nav-col">
                <ul id="nav">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Intro</a></li>
                </ul>
                <a href="#" id="pull">Menu</a>
            </div>
        </div>
    </div>
    <div class="row gutters" id="row2">
        <div class="col span_9"></div>
        <div class="col span_3"></div>
    </div>
</div>

If this does not work for you, please post the code in CodePen and tell us more about your testing environment. In what browser(s) are you testing? You’ve mentioned “barely noticable” a couple of times… do you have a retina display?

For me, applying the fix that Paul and DP gave, plus floating the list items to the right, fixes the jog in Opera.