Is There Anyone Who Knows Anything About HTML That Can Help Me Out?

Thomas Hawk's blog - 800x600Thomas Hawk’s blog – 800×600 Hosted on Zooomr

Fajro points out via the image above something that I’ve known about for a while and something that drives me crazy. Unfortunately I don’t know html at all so I have no clue how to fix it in my template, but apparently when THDC is in 800×600 mode there is this horrible overlap of text.

Anyone know how I might fix this problem?

Update: Thanks to all who offered suggestions and thanks especially to Alan Le who gave me a little text rewrite for my template to fix the problem. I really appreciate the help all!

Be Sociable, Share!
Loading Facebook Comments ...

No Comments

  1. Alan says:

    Thomas,

    I think the problem is because the total width and padding of the div blocks on your sites exceed 800 pixels.

    A quick look at your site’s css, there are 4 styles that controls the minimum width of your content area. They are:

    body {
    background:#135;
    margin:0;
    padding:40px;
    font:x-small “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
    text-align:center;
    color:#ccc;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    #main {
    width:490px;
    top: 60px;
    float:left;
    }

    #sidebar {
    position: absolute;
    top: 120px;
    right: 0;
    padding: 15px;
    width: 250px;

    }

    #content {
    width:650px;
    top: 60px;
    margin:auto;
    padding:40;
    text-align:left;
    }

    Adding up the width and padding values of these styles, the content area takes up: 40 + 40 + 490 + 250 + 15 + 15 = 850px. Hence it doesn’t fit on 800×600 but fine on 1024×800 or larger resolutions. A solution is reduce the widths and padding on these 4 styles to fit 800px. I would probably reduce the padding on the body since there are plenty of whitespace on your left margin (padding: 40px 10px) and the width of the sidebar (width: 200px).

    Hope this helps…

  2. My posts were removed as they were off base. Alan has it right. Multi-tasking isn’t the best thing when debugging layout issues.

  3. Thomas Hawk says:

    Hey Alan, I changed my padding from 40px to 20px and it seems to have made the problem worse at 800.

    Any other suggestions. It would be nice if I could just force my sidebar to stay with my body without having to have it pulled all the way over to the right of the page.

  4. dalton says:

    You could try getting rid of absolute positioning for the sidebar. Something like this for the sidebar div?

    #sidebar {
    position: relative;
    margin-left: 650px;
    top: 120px;
    right: 0;
    padding-left: 0px;
    width: 250px;

    }

  5. Alan says:

    Thomas, remove the width:650px; from the #content style. That’s what forcing the weird whitespace on the left.

  6. Alan says:

    It’s a lot of guesswork with the width values, so I saved your site locally and modified the styles on my box.

    I think what you’re going after is a way so that the sidebar stays with the #main blog post area. I tried it locally on my box and I think this is the solution.

    Replace the corresponding styles with the styles from below.

    /* Content
    ————————————— */
    #content {
    width:780px;
    top: 60px;
    margin:auto;
    padding:40;
    text-align:left;
    }
    #main {
    width:490px;
    top: 60px;
    float:left;
    }

    #sidebar {
    float: left;
    top: 120px;
    right: 0;
    margin-left: 55px;
    width: 200px;
    }

  7. Hi Thomas,

    Looks like I was beaten to the solution. The CSS definately needs to be tweaked as above. You should be able to easily make the site resolution independent.

    BTW, love the pictures, you make me want to go out and take more and more. Thanks!

  8. Josh says:

    To add to Alan’s work. Using % for width will fix the problem for small resolutions and allow those using much larger resolutions to utilize the entire screen.

    /* Content
    ————————————— */
    #content {
    min-width: 700px;
    top: 60px;
    margin:auto;
    padding: 20px;
    text-align:left;
    }
    #main {
    width:75%;
    min-width: 490px;
    top: 60px;
    float:left;
    }

    #sidebar {
    float: left;
    top: 20px;
    right: 0;
    margin-left: 50px;
    width: 15%;
    }

  9. Jon says:

    I’m no CSS expert but I was playing around with it.

    #sidebar {
    position: absolute;
    top: 120px;
    right: 0;
    left:100%;
    padding: 15px;
    width: 250px;

    }

    Not sure is that good coding practice but it seems to fix it.

  10. Yes Thomas, Your sizes are off. The first guy was correct. Hey check out this free source of music at lyncal.com make sure to visit the music lounge and talk to the sexy female robot. She is so funny.ect.

  11. Lebatron says:

    looks like you got all the help you need. I’m just checking up on the blog and seeing how things are going. Looking good.

  12. Thomas Hawk says:

    Hey Alan, thanks much! I think the rewrite you did on my /*content section did the trick.

    I pasted that over my previous /*content and now it looks much, muhc better with the sidebar and main text right next to each other.

    I really appreciate the help all and I think that THDC now looks fine in 800 size as well!

    Thank you. Thank you. Thank you!

  13. Alan says:

    Anytime Thomas. I’ve been a big fan of your photography, blog, and tech industry insight for awhile now. Glad that I can contribute something back to you.