SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Layout has basic problem with %'s (only Firefox renders correctly)

    I'm trying out a responsive layout, so my first step is to create a Logo and Navigation elements that scale correctly. I set them to float left, 25% and 75% of the page (1140 px), respectively. This renders fine in Firefox, but Chrome / Safari can't get width correct and render the navigation a little short.

    Ok, so here's the weird part: set the page width to 960px and everything renders fine.
    What is going on? (entire html file below)



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <style>
    *{
    margin: 0;
    padding: 0;
    }

    #page {
    width: 1140px;
    background-color:#063;
    height: 500px;
    margin: 0 auto 0 auto;
    }

    #logo {
    width: 25%;
    float: left;
    background-color: blue;
    }

    #nav {
    width: 75%;
    float: left;
    }

    ul {
    width: 100%;
    list-style:none;
    }

    li {
    width: 25%;
    float: left;
    height: 30px;
    background-color: red;
    }
    </style>


    </head>

    <body>


    <div id = "page">

    <div id = "logo">
    <h1>LOGO</h1>
    </div>

    <div id = "nav">
    <ul>
    <li>1.</li>
    <li>2.</li>
    <li>3.</li>
    <li>4.</li>
    </ul>

    <ul>
    <li>1.</li>
    <li>2.</li>
    <li>3.</li>
    <li>4.</li>
    <li>5.</li>
    </ul>
    </div>

    </div>

    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You need to realize that not all browsers rounding capabilities are the same . Some round up. Some round down.

    Now lets analyze your page. You have a 25% sidebar width. 1140*.25 = a round whole number. No problems there.

    Now lets take the other part of your page. 1140*.75=855px. Then you lay your list out in groups of 4 (via width:25%). 855/4=213.75px.

    That's not a whole number. Browsers will round up / down b ecause .75ths of a pixel can't exist. If you do the math and update your page wrapper width to accomodate for percentages coming off with decimal places (get it so no decimal places exist!), then your problem will go away.

    Edit-try 1120px?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    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,

    As Ryan said you can't expect multiple percent elements to add up to the whole space available. It just won't work.

    You can make it work by un-floating the last item at the end of the row, removing the width and using overflow:hidden to c reate a rectangular block.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>
    * {
    	margin: 0;
    	padding: 0;
    }
    #page {
    	width: 1140px;
    	background-color:#063;
    	height: 500px;
    	margin: 0 auto 0 auto;
    }
    #logo {
    	width: 25%;
    	float: left;
    	background-color: blue;
    }
    #nav {
    	width: 75%;
    	float: left;
    }
    ul {
    	width: 100%;
    	list-style:none;
    }
    li {
    	width: 25%;
    	float: left;
    	height: 30px;
    	background-color: red;
    }
    #nav li.last{
    	float:none;
    	overflow:hidden;	
    	width:auto;
    	zoom:1.0;
    }
    </style>
    </head>
    
    <body>
    <div id="page">
    		<div id="logo">
    				<h1>LOGO</h1>
    		</div>
    		<div id="nav">
    				<ul>
    						<li>1.</li>
    						<li>2.</li>
    						<li>3.</li>
    						<li class="last">4.</li>
    				</ul>
    				<ul>
    						<li>1.</li>
    						<li>2.</li>
    						<li>3.</li>
    						<li class="last">4.</li>
    						<li>5.</li>
    				</ul>
    		</div>
    </div>
    </body>
    </html>
    Now the last item will simply fill whatever space is left and you will get no gap.

    The downside is that you need to add the class to the end of row item.


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
  •