PDA

View Full Version : CSS Float Issue



themind
09-20-2005, 12:11 AM
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

mattster
09-20-2005, 09:33 AM
Remove "position:relative;" from the #pdm

mwinter
09-20-2005, 01:21 PM
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 (http://mwinter.webhop.info/dd/themind/smoke-ring/) 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 (http://www.dynamicdrive.com/forums/member.php?u=1) to remove the thread, or at least close it.



Remove "position:relative;" from the #pdmThat 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