Log in

View Full Version : Resolved Things are stacking instead of ...



ModernRevolutions
12-29-2009, 10:39 AM
As you can see on this page the header is to the right of the last picture of me, I want it under all of the pics. However, whatever I seem to do it keeps "stacking" on the right of the other image, what do I do?

http://modernrevolutions.vivid-avenue.net/photos-of-me/

Having this problem too?? Use this code after the last thing you want (ontop) for example I would put this after the last picture of me or before the header "Pictures of my Friends".


<BR CLEAR="all">

Snookerman
12-29-2009, 01:24 PM
That issue is know as a "collapse". This happens when there are floated elements inside a container. The solution is to clear the float. Your code works, but is unsemantic. The most common solution is to give the collapsed container the following css rule:

overflow: hidden;

Have a look at this article and the screencast:
http://css-tricks.com/all-about-floats/ (http://css-tricks.com/all-about-floats/)
http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/ (http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/)

You can also google "clearing floats" and you'll find heaps of info on that.

Happy coding!