2 column; fixed width

HTML & CSS
1

I have a simple website with no graphics.
I am trying to implement two columns with fixed width.
The left column div#left is for navigation.
The right column div#main has all the content and is comprised of all <p>.

For some of the pages, the entire two columns is shifted slightly to the left by about 1/8".

Any idea what is causing this. I am completely stumped.

{
padding:0;
margin:0;
}

body
{
font-family:verdana, geneva, arial, sans-serif;
font-size:12px;
background:#ffffff;
color:#000000;
}

div#content
{
width:1000px;
margin:0 auto;
}

div#top h1
{
color:#850600;
font-size:24px;
margin-left:300px;
text-align:center;
}

div#top h2
{
color:#605138;
font-size:18px;
margin-left:300px;
margin-bottom:12px;
text-align:center;
}

div#left
{
width:300px;
border-top:1px solid #993d00;
float:left;
}

div#nav
{
border-bottom:1px solid #993d00;
background:#ffd9bf;
}

div#nav li
{
list-style:none;
}

div#nav li a
{
display:block;
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
font-size:15px;
font-weight:bold;
color:#990000;
text-decoration:none;
}

div#nav a#now
{
color:#990000;
}

div#nav a:hover
{
color:#009999;
}

a:link { color:#009999; }
a:visited { color:#990000; }
a:hover {color:#444444; }

div#main
{
text-align:left;
float:right;
width:700px;
}

2

Hi, ieee488. It’s a bit hard to guess exactly what the HTML looks like and CSS without the HTML is largely meaningless. Please use the link in my signature at the bottom of this post and review our posting guidelines. It helps us give better answers.

Here’s a guess, though.

left and right padding and margins add to the width of a fixed width container, unless you use CSS3’s
{box-sizing:border-box; -moz-box-sizing:border-box;}
so the width may be expanding a little because margins, padding or borders on the outer containers (or possibly inner containers with fixed widths) have not been figured into the total width.

Hope this helps

3

Thank you for replying.

The padding are for the links inside the div#nav
I don’t have left or right margins or padding for anything else.

When the two columns are shifted to the left, the width remains 1000px.

Here is the code for the home page. It is PHP.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1” />
<meta http-equiv=“content-language” content=“en” />
<link href=“linux.css” rel=“stylesheet” type=“text/css” />
</head>

<body>

<div id=“content”>

<div id=“top”>
<h2>adventures with Linux</h2>
</div>

<div id=“left”>
<div id=“nav”>
<?php include(“menu.php”); ?>
</div>
</div>

<div id=“main”>
<div id=“home”>
<h4>Home</h4>

<p> Aliquam bibendum auctor nisi, eu blandit tellus dapibus a. Ut vulputate, velit id posuere congue, mi odio varius sem, id fermentum mi velit vitae lacus. Aliquam ut tincidunt nibh. Donec sed purus sollicitudin, molestie justo eget, pretium mi. Vivamus pellentesque nisi in purus rutrum, nec porttitor eros blandit. Proin orci dolor, blandit sit amet diam vel, mollis luctus enim. Nam blandit justo posuere lorem semper euismod. Nulla vel dui tortor.</p>

<p>Morbi ut urna ac velit pellentesque ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec odio non orci interdum suscipit id pretium justo. Nunc dapibus posuere erat, et imperdiet nisl volutpat et. Morbi quis vehicula justo. Nunc et porta ante. Nam dignissim leo erat, at dapibus tortor cursus a. Proin consectetur diam id mauris blandit malesuada ac nec tortor. Pellentesque egestas justo lacus, id condimentum ipsum tincidunt vitae. Vestibulum vulputate elit nisi, ac interdum quam tempor at. Nam tincidunt ac velit at aliquet. Donec id congue nulla. In luctus, mauris eget tempor sagittis, tortor metus cursus sapien, sit amet dapibus ligula lectus et leo. Maecenas ut elit sed quam viverra faucibus id vitae justo. Ut nec sem nibh.</p>

</div>

<p id=“email”><img src=“…/mail.png” alt=“” /></p>
</div>

</div>

</body>
</html>

4

Hmmm. The code renders with a width of 1000px for me in FF on a PC. The only thing seems to be missing is a way to clear the floats. You could add {overflow:hidden} to Content, or employ a modern clearfix technique instead. I lean toward using clearfix for outermost containers, but overflow:hidden doesn’t seem be be a problem here, so it might be OK.

If you can post a link to a test site, or the actual site if it is live, I could compare pages and should be able to spot the cause.

BTW - posting code within [noparse]

[/noparse] tags preserves formatting  and does not take up as much vertical space in a post.
5

I just had a thought… is it possible that the length of the content on some pages triggers the vertical scrollbar, thereby shifting the page to the left?

6

That was it! Thank you!

What I dunce I am.

7

Ha, the [U]Jumping Page[/U]! :slight_smile:

8

[ot]

Welcome back, Francky! :)[/ot]

9

I was trying to think of a witty way to assure you that it’s not such an unheardof mistake when Francky posted the link to his demo. Great timing :lol:

Mind if I ask whereabouts you live in NJ? I’m in Someret County, Franklin Township.

10

You are not that far away. I am near Twin Rivrs.

I am not good with foreign languages, but I am not quite sure what that demo is suppose to show me. ???

11

Here is the translation in English:

12

Aha! Thank you.