Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Spacing Issue

  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Spacing Issue

    Hi, I am in no way an expert in anything to do with coding, but I know enough to get by. I am current trying to make a site with a few friends. My issue is browser compatibility. It looks fine in IE, but in Firefox, Safari, and Chrome it adds a huge space I can't seem to get rid of.
    I believe it has something to do with how I added <div> layers. The way it is set up is a header div, main content, and a sidebar on the left (Yes, the dreamweaver template).

    Can someone PLEASE show me where I went wrong. I have been trying this for days and am not finding anything.

    Thank you.

    The website is:
    http://www.laserjump.com/beta
    If you need me to post the source code here I can.
    Last edited by shadowfox2988; 02-18-2011 at 08:27 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello shadowfox2988,
    That is float drop you're seeing and it's caused by your box model being off.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all could when figuring width/height.

    To explain further:
    • #container is 900px wide
    • #mainContent reduces that width by 40px (margin: 0 20px;) leaving you 860px room
    • #sidebar is 160px wide PLUS 20px padding and 20px margin - total= 200px wide
    • #example_1_container is 680px wide PLUS 2px of border - total= 682px width given to #mainContent


    The total room needed for #sidebar and #mainContent to be side by side is 882px.

    Solution may be as simple as increasing width of #container.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,

    Thank you very much. It was very frustrating trying to find that problem. And now that I see it, it seems so obvious. I forgot I added a margin to the sidebar.

    You have my sincere thanks.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •