Results 1 to 3 of 3

Thread: CSS Float Issue

  1. #1
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Float Issue

    The problem I'm having is that an entire div is not showing up on a page that I am working on. It is basically a 'footer' div (underneath everything) that has some simple text and a link.

    www.pdmdigital.com/nickindex.htm

    You will have to view the source to see the CSS I'm talking about. It is the '#pdm' id that I'm referring to. If I remove the 'float left' from the above div '#pictures' it will then show up and allow me to use the top margin I would like, but this screws up the picture placement. Thanks for taking the time to read this, and thanks for any input you may have, theMind-

    PS How do I delete threads that I have posted? If/when I find my own solutions (such as the hover box thread) I would like to be able to delete the thread so as not to waste anybody's time, or forum space. Thanks, tM

  2. #2
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Remove "position:relative;" from the #pdm

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by themind
    The problem I'm having is that an entire div is not showing up on a page that I am working on. It is basically a 'footer' div (underneath everything) that has some simple text and a link.
    It is showing up in Firefox. Notice the horizontal scrollbar? Press Ctrl+A to select all text on the page, then scroll to the right and you'll see your text level with the products image.

    The reason is that when content is floated, in-flow content moves next to that content. To ensure that later content appears below the floated content, use the clear property.

    Incidentally, you can simplify that quite a bit. You certainly don't need any tables or that many div elements. Take a look at a quick mock-up I've produced. Obviously Firefox and Opera will show it the best, but the result is fine in IE, too. It could be improved a bit by emulating the max-width property, but that's overkill I think.

    This example is usable when images are disabled, not least because background images are supplimented by background colours (unlike in the original).

    PS How do I delete threads that I have posted?
    I've only created one thread when I wrote an article for the JavaScript forum so I'm hardly an expert in this regard. However, editing the first post and selecting the deletion radio button may cause the thread to be deleted. The editing period is rather short though, so even if it does work, it won't be useful for older threads. Failing that, you could ask ddadmin to remove the thread, or at least close it.


    Quote Originally Posted by mattster
    Remove "position:relative;" from the #pdm
    That might work for IE (due to its broken behaviour), but it's not an actual fix. On the subject of the position property, I believe all instances of it can be removed. With the #container element (the only rule where the position property actually does anything), it should be replaced with the appropriate margins on that element.

    Mike

Bookmarks

Posting Permissions

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