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

HTML & CSS
1

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”>

&lt;div id = "logo"&gt;
&lt;h1&gt;LOGO&lt;/h1&gt;
&lt;/div&gt;

&lt;div id = "nav"&gt;
&lt;ul&gt;
&lt;li&gt;1.&lt;/li&gt;
&lt;li&gt;2.&lt;/li&gt;
&lt;li&gt;3.&lt;/li&gt;
&lt;li&gt;4.&lt;/li&gt;
&lt;/ul&gt;

 &lt;ul&gt;
&lt;li&gt;1.&lt;/li&gt;
&lt;li&gt;2.&lt;/li&gt;
&lt;li&gt;3.&lt;/li&gt;
&lt;li&gt;4.&lt;/li&gt;
&lt;li&gt;5.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

</div>

</body>
</html>

2

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?

3

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.


<!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.