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
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Width Problems & Float Question

    How come when I size two adjacently floated divs 20/80% I get an overlap problem?

    Is it the border?

    Next: If I do this:
    Code:
    <div id="container">
     | <div id="floated_div_1">
     |   |Stuff...
     | </div>
     | <div id="floated_div_2">
     |   |Stuff...
     |  </div>
    </div>
    Then the question is, can we say those nested, floated divs are actually still inside the #container or do we have to say they are floated out of it?

    In other words - when something is floated, is it still considered to still be inside it's non-floated container or not?

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    1)
    with the correct box model (as opposed to early IE's broken box model) the borders/margins are added to the dimensions of the box. So width:10px; + border:10px; + margin:10px = 50px (left and right borders and margins have added 40 to our original width of 10). So if you have any borders at all on your 20/80% boxes then yes that would explain the overlap problem.

    In quirks/compatibility mode IE6/7/8 still implement the old </=IE5 broken box model. I guess the old broken box model was set up so that the borders/margins were subtracted from the boxes dimensions. So width:50px; - margin:10px - border:10px; would actually cause you actual boxes content area to be 10 px even though you specified a width of 50px. You can see how this method is a little more counter intuitive. It was also against the HTML specs and thus made crossbrowser websites much more difficult.

    2)
    The floated elements are inside the container.

  • Users who have thanked linehand for this post:

    Doctor_Varney (01-16-2010)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Hi Linehand - thank you very much!

    Kind regards

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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