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. #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.

  3. Users who have thanked linehand for this post:

    Doctor_Varney (01-16-2010)

  4. #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
  •