www.webdeveloper.com
Results 1 to 4 of 4

Thread: DIVS behaving unexpectedly

  1. #1
    Join Date
    Dec 2009
    Posts
    32

    DIVS behaving unexpectedly

    If you could please take some time to explain the following I would be grateful.

    Code:
    <div class="item">
                        <img src="item1.jpg" alt="Information" style="float:left"/>
                        <p> text</p>
                    </div>
                    <div class="item">
                        <img src="item1.jpg" alt="Information" style="float:left"/>
                        <p> text</p>
                    </div>
                    <div class="item">
                        <img src="item1.jpg" alt="Information" style="float:left"/>
                        <p> text</p>
                    </div>
    The bottom line is that I assumed the parser would create a line break after each "item" div. However, I get something like this:zmzf3c.jpg

    Does a float get cleared outside of it's parent? I'm assuming so.

    Also. There is a white space between my header div and body div. However this white space is not present in IE, only firefox. I recall this being a common problem but can anyone give me the final word?

    Lastly. I assumed that if I had a floated div, the next sibling div's width would be computed to fit the remaining parent width, however I find in firebug that it actually has it's full width computed and it is simply "overlapped" by the floated div. Is this correct?

    Many many regards!
    Alex Pineda

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You need to clear the float:
    Code:
    .item {overflow:hidden;}
    There is a white space between my header div and body div
    Show the code you are using.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Dec 2009
    Posts
    32
    It's for a friend, please don't hate my noobiness.

    http://amcoconcrete.ws/demo/

    There's a margin at the top where there shouldn't be.

    Also the div on the right side (#items) seems to underlap (?) the floated red div (#info).

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    There's a margin at the top where there shouldn't be.
    Code:
    <img style="position:absolute; top:2px; left:233px;" src="helmet.jpg" alt="" />
    Also the div on the right side (#items) seems to underlap
    They appear to be butted together, not overlapping.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles