SteveoSupremo,
I would think that you had run into this before. The problem is that when you float an element in a container using CSS and divs the containing div will not grow to envelope the floated element. The solution for you (if you want to have a floated element cause the container to grow) can be achieved a number of ways using empty spans or empty divs with a property set to "clear:both;"
What I do when it is the main body (your #content div) before the footer, I place a <hr /> (horizontal rule) before the close tag for the container and give the hr a property value set of clear:both; visibility:hidden; See the below examples using your code:
<div id="content">
<h1 align="center">Acrylic Paintings</h1>
<p> Angela Enjoys working with Acrylic paints here aer some of her artwork. </p>
<p> click on any picture to see a larger version of it. move your mouse to the top right and top left in order to move between large pictures. </p>
<p/>
<p/>
<div class="thumbscontainer">
<ul class="thumbs">
<li>
<a title="title - description" rel="lightbox[maxigallery]" href="/assets/galleries/7/07-07-06_0901.jpg">
<img class="thumbnail" alt="title » Click to zoom ->" title="title » Click to zoom ->" src="/assets/galleries/7/tn_07-07-06_0901.jpg"/>
</a>
<p style="width: 166px;"> title </p>
</li>
<li>
</li>
</ul>
<!-- Place the horizontal rule element here just before the end of the #content div -->
<hr />
</div>
<p/>
<p> Please contact me if you want to see more pictures. </p>
</div>
#contnent hr{
clear:both;
visibility:hidden;
}
This can be considered unsemantic but when displayed with the CSS off it looks okay because there will just be a horizontal rule before the footer. For me that actually adds meaning (stuff below this line is not part of the content but is site boilerplate much like the bottom margin of a book or report).
That being said if you want to use an empty div for the same thing, go ahead. You can see an example of how this works here
http://www.goldriverhomes.ca/ if you look at the source at around line 55 you will see an <hr> (I use HTML 4.01 not XHTML so you can use <hr />) and if you look at my stylesheet (
http://www.goldriverhomes.ca/assets/templates/grh/_styles/common.css) you will see:
#content_wrapper hr{
clear:both;
visibility:hidden;
position:relative;
height:0px;
background:#300;
}
I have added positioning which is not necessary but helps compatibility with some browsers. For older IE support I would suggest both adding the height of 0px and make the background color the same as your container background in case some browsers act up.
Hope this helps.
Jay
MODX Staff