SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column; fixed width

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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 [code] tags preserves formatting and does not take up as much vertical space in a post.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #6
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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?
    That was it! Thank you!

    What I dunce I am.

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Ha, the Jumping Page!

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by Francky View Post
    Ha, the Jumping Page!
    Welcome back, Francky!

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ieee488 View Post
    That was it! Thank you!

    What I dunce I am.
    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

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

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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

    Mind if I ask whereabouts you live in NJ? I'm in Someret County, Franklin Township.
    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. #11
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)

    Jumping Page demo

    Here is the translation in English:

  12. #12
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    Here is the translation in English:
    Aha! Thank you.


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
  •