Jeralyn Merideth wrote: > The side boxes are flaking out on me. By that, I mean that I added a > couple test links there (because this was the whole purpose of > putting those there...for news links) and the top box became > bigger...expectedly...but as it grew it shoved the lower box over the > footer. It didn't cause the wrapper div to grow with it.
Yes, it does, but it's 5px short because of the pulled-up margin at the bottom of the rounded corner part of the sidebar. That's what I sometimes refer to as a "hanging float" or a "half-cleared float" (depending on the degree of pull-up etc, but the effect you are experiencing was completely unintentional. Correction included in the CSS below. > Also, if the main content box doesn't have a certain amount of > content in it so that it's longer in length than the side boxes, the > very bottom side box moves out of the flow and wants to sit UNDER > the main content box! Why does this happen and how can I fix it? > Here's the link again:http://216.119.67.187/js/index.htm Both problems are caused/affected by the fact that you have 3 individual sidebar as 'float: left'. They will then act "individually", and end up where there are space for them - with hanging floats and all. That's how floats are supposed to act, so we just have to get them back to where they belong. Solution: wrap all three (or more) sidebars in one and the same div, and style that to hold the sidebars in place. I call it 'secondary' in the following. HTML: <div id="secondary"> <div id="sidebar"> .... <!--end box 3--> </div> CSS: #secondary { float: left; width: 27%; margin-bottom: 7px; } Now you'll get one, stable, float on the left side, and all elements that belong on the left will stay inside it. Then you also have to restyle the 'sidebars', like this: #sidebar { margin-left: 8px; background: #F0F0E7; float: left; width: 95%; margin-top: 14px; clear: left; display: inline; } ...to compensate for the fact that they now take their width in relation to 'secondary' instead of the entire page-width. Some leftover from earlier - probably a misunderstanding... You are now using an id="sidebar" 3 times, and IDs shouldn't be used more than once in each page. You should correct that so you have a class="sidebar" / div.sidebar instead, as classes can, and are supposed to, be used as many times as you like/need in each page. You do have a p.sidebar already, so make sure you address the right element with each 'sidebar' class. regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
