SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    What your preffered method for dealing with rounding errs?

    say you are floating a number of % widthed elements side by side inside a container. Ideally you would want the the element to fill up 100% ( all pixels) within the container. you may get a gap or a drop in the elements caused by the UA rounding algorithm. Arguably worse , is that the gap will be variable depending on the width of the view port and the # of floated elements. This may not be an issue to some , but to me is is aesthetically disturbing.


    To mitigate this effect I have relied on one of two two methods depending on the situation an desired effect.


    The first option , assuming I have "gutters" between the elements. is to switch the float direction and adjust the margin.
    Code:
    		
    <ul class="nav">
    	<li><a href="#">item<br> taller float</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
     </ul>
    
    
                   .nav{margin: 0; padding: 0 0 0 6em; list-style: none; border: 1px solid; overflow: hidden; }
    		li {float: left; width: 25% ; background: pink;margin-right:2em}
    		li:last-child {float: right;  margin-right:0 }
    		li:first-child {margin-left:-6em  }
    So the last gutter absorbs the remainder pixels. if I don't want any a gutters, and the situation permits, I tend to un-float the last element as such:

    Code:
    		.nav{margin: 0; padding: 0; list-style: none; border: 1px solid; overflow: hidden; }
    		li {float: left; width: 25% ; background: pink;}
    		li:last-child {float: none; overflow: hidden; width: auto}
    In this case the last element absorbs the remainder pixels. When needed, I sometimes to blend the two techniques so as to have the gutters remain fixed and the last element absorb the remainder pixels.

    I find these work fairly well, as far as protecting the layout goes, but of course they aren't pixel perfect and require a modicum of leeway /forethought when creating and positioning any background images.

    I'd love to know what techniques do you guys employ to deal with rounding errors?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Dresden.

    Like you I usually prefer to not float the last item and let it sit on free space. This is especially true for menus that stretch full width where authors have just added padding to make the menu links fit all the way across and then find that the last word has dropped down in some browsers because the width of text varies so much between browsers/platforms.Unfloating the last item removes the need for any padding on the last item and gives you more breathing space.

    Floating the last item right and removing the margin is also a valid technique but may result in some uneven spacing.

    The negative right margin on the last floated item is also useful for soaking up rounding errors but you have to be careful you don't lose content off screen.

    I documented some of these techniques about 8 years ago but still worth a read.

    Of course we could use display:table-cell these days (ie8+) and just let the browser work it out as it will make the display:table element fit (or wait for the flex layout to be well supported).

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Floating the last item right and removing the margin is also a valid technique but may result in some uneven spacing.
    Yes. Which is why could classify my solutions as having the side effect of 'uneven spacing' or 'uneven element size' ( the last element is not a perfect pixel match as the others)


    The negative right margin on the last floated item
    this sounds intriguing but how would you figure out how much so as to create an exact fit?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    this sounds intriguing but how would you figure out how much so as to create an exact fit?
    In modern browsers I've never seen more than a 2px gap so 2px should do:

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav {
    	margin: 0;
    	list-style: none;
    	border: 1px solid;
    	overflow: hidden;
    	padding:0 0 0 6em;
    }
    li {
    	float: left;
    	width: 25%;
    	background: pink;
    	margin-right:2em;
    }
    li:first-child{margin-left:-6em}
    li:last-child{margin-right:-2px;text-align:right}
    
    </style>
    </head>
    
    <body>
    <ul class="nav">
    		<li><a href="#">item<br>
    				taller float</a></li>
    		<li><a href="#">item</a></li>
    		<li><a href="#">item</a></li>
    		<li><a href="#">item</a></li>
    </ul>
    </body>
    </html>

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    In modern browsers I've never seen more than a 2px gap so 2px should do:
    I must be doing something odd, as my gaps (rather gap ranges, as the gap vary with the container width) seem to be directly correlated with the # of elements. so if I have to elements I may get 0-2px gap, 3 elements a 0-3px, 4 elements 0-4px..etc. this is why i figured it mus be rounding 'error'. That is the browser is deciding that if a container is 195px ,at some point, wide and I have 4 child elements at 25% that each child should be 48px (but 48*4= 192.. so 3 pix gap). Really it's just the really complex layout hat really show the gap.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I must be doing something odd, as my gaps (rather gap ranges, as the gap vary with the container width) seem to be directly correlated with the # of elements. so if I have to elements I may get 0-2px gap, 3 elements a 0-3px, 4 elements 0-4px..etc. this is why i figured it mus be rounding 'error'. That is the browser is deciding that if a container is 195px ,at some point, wide and I have 4 child elements at 25% that each child should be 48px (but 48*4= 192.. so 3 pix gap). Really it's just the really complex layout hat really show the gap.
    Hmm, I'd need to see an example because as far as I remember Opera was the only one that rounded that badly as it doesn't do fractions of a percent. IE7 and under were also a few pixels out depending on the number of elements but Firefox handles it all differently and keeps a running total of the percentages and should therefore (theoretically) be no more than 1px out)

    This shows no problems in all but IE7 and under.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{margin:0;padding:0}
    ul {
    	margin:0;
    	padding:0;
    	background:blue;
    	list-style:none;
    	height:3em;
    }
    li {
    	width:5%;
    	background:green;
    	height:2em;
    	text-align:center;
    	float:left;
    }
    li:nth-of-type(odd) { background:yellow }
    </style>
    </head>
    
    <body>
    <ul>
    		<li>1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    		<li>5</li>
    		<li>6</li>
    		<li>7</li>
    		<li>8</li>
    		<li>9</li>
    		<li>10</li>
    		<li>11</li>
    		<li>12</li>
    		<li>13</li>
    		<li>14</li>
    		<li>15</li>
    		<li>16</li>
    		<li>17</li>
    		<li>18</li>
    		<li>19</li>
    		<li>20</li>
    </ul>
    </body>
    </html>
    If there is a gap you should see a blue background at the right or if it is too big the float should drop.

    I guess though it may be more complicated if you have padding and margins also to take into account.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    yes FF is amazing but Safari is beign the chief culprit here. It occurs to me that I need to also how the new webkit-Opera will handle this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •