1. Welcome to the new MacRumors forums. See our announcement and read our FAQ

Issues with width of container

Discussion in 'Web Design and Development' started by theNIC, Aug 25, 2009.

  1. macrumors member

    I think that's what the issue is, after I tried to figure this out last night. The issue is that my container width is being shortened somehow, not sure. As you can see in my stylesheet (below) I have my .divider's width set to 100% and on my website (thecurseofcurves.com), it's being shortened. There's no padding blocking it either, I think. Sorry I'm bad at explaning things, but if you could help me, you rock.

    Stylesheet (I would attach it, but it's huge): http://thecurseofcurves.com/css/master.css

    Index: http://thecurseofcurves.com/index.html

    If you want I could attach them, but I think they're rather large. Lol

    Thank you,

  2. Moderator emeritus


    I don't have the time to get overly specific, but remember that 100% is relative to its parent. I saw some CSS that gave some padding in places that could be contributing, but the .divider is in fact doing 100% width. I used the Web Developer Toolbar add-on for Firefox to see how everything lined up. Using that and Firebug (add-on) you should be able to see where you can make your fixes.
  3. macrumors member

    Thank you, angelwatt. I still don't understand this error, the container (which is it's parent, correct?), is set at 900px (width of white background = 900px). If you have more time, could you explain to me more in depth. Thanks if you can!

    (I'm new to this whole thing.)
  4. #4
    You should really start over. Forget about this error, just rewrite your code from the ground up, it's full of bugs and errors.

    After having a brief look, I can see it's not your code, but it's copied from somewhere. Start writing your own, or debug this one.

    In your CSS, use url('link') instead of url(link). You've made this mistake three or four times. Also, go here and look over the tag list. You are only allowed to use these ones, so no <adjective> tag. When you need to edit small bits, use a span. For example, instead of <adjective>, create a new CSS ID, #adjective, and use <span id="adjective"> instead of the current implementation.

    Next, when using anything else except for alphanumeric characters, instead of using, say &, use &. You can find a list here. So, instead of ", use ", and so on. You only need the HTML Name column, not the ASCII or the HTML Number.

    Many many other things which would require a rewriting from the ground up. For example, DO NOT use any content tag outside of the BODY. You've done this... TWICE. And close them inside of the BODY tag...

    Just have a look over the Validator. It helps a lot, especially if you're still learning.

    As for the error, God knows... perhaps you could use width: 30px and margin: 0 auto in the divider, which, by the way, is a CLASS instead of an ID, although it is only used ONCE...
  5. macrumors member

    Actually, Not Available, it is my code. Thanks for your help though.
  6. Moderator emeritus


    Width of white background = 914px (give or take) actually. The black bar that's dividing is 900px wide though. I'm attaching an image to illustrate. I used the Web Developer Toolbar, which has a ruler that I have stretched across the white background. As you can see where the red arrow is pointing, the width is measures is larger than you think.

    Attached Files:

  7. #7
    Well then, I'd say you've spent more time on decorating the comments than writing the actual code. I don't know where you're learning from, but I'd say it annoys you more than it makes you understand things.
  8. macrumors member

    Thank you very much angelwatt, I guess when I was making the background I messed up or something? Thanks though. As for Not Available, I'm self taught.

    Oh, I downloaded FireBug, but Web Developer Toolbar is for older versions of FF and I have the newest version. I'm going to check soon though to see if it's been updated for the newest version. Thanks!

Share This Page