I have a nice image gallery going, but when you manually adjust the window size to a narrower width the thumbnail divs extend below the containing div. Am I clearing my floats wrong?
Thanks,
Matt

http://thesweetwatercabin.com/photos_alt.html

div.clearer
{clear: left;
line-height: 0;
height: 0;}

The DOM tree in Chrome shows that you have set a fixed height on several places. I can't see where they are coming from though

Here is what I mean:

<div id="contentwrapper" class="column" style="height: 790px; ">
   <div id="contentcolumn" class="column" style="height: 790px; ">
      ...
   </div>
</div>

<div id="leftcolumn" class="column" style="height: 790px; ">
   ...
</div>

And the height changes if I resize the window and reload the page, which to me seems to suggest that there is some javascript that sets the height. But again, I cannot find anything that would cause this


EDIT: Oh, found it It's in the matching_columns.js file. Why would you use that in the first place?

Hey! Thanks.
I use the matching column script to fill in background colors, so that the background colors extend all the way to the bottoms of all divs. See what happens when I take it out:
http://thesweetwatercabin.com/photos_alt.html

Is there a better way to get "matching columns"?
Thanks lizciz

Yes, there are better ways. I believe there is a sticky thread about it in this (CSS) sub forum. Basically, you'll want to set height, or min-height (can't remeber), to 100%. This will make the div fill up its parent.

And as you may have already noticed, removing the javascript fixed your initial issue

Also, perhaps it's just me but I don't see why you'd place the left column with -100% left margin. Personally, I think this would be easier(?):

<div id="content_wrapper">
   <div id="left_column">...</div>
   <div id="main_content">...</div>
   <div class="clear"></div>
</div>

#left_column { float: left; width: 150px; height: 100%; }
#main_content { float: left; height: 100%; }
.clear { clear: both; }

lizciz, The sticky
http://tycoontalk.freelancer.com/css...l-browser.html
Shows how to make a div fill the browser view port. I need matching columns. I am optimistic about solving matching columns requirement with css. But I think I need another solution than Div 100% - Create pages that fill the browser window. Do you agree?

Here's a small quote from the stickied link. I marked parts of the text with bold.

In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent.

I still think you should give it a go

lizciz,
I went ahead with the "pages that fill browser" tutorial. I still can't get it to work. I have included an additional page with formatting more like you suggested, on which I cannot get it to even columns either.


http://thesweetwatercabin.com/photos_alt.html

http://thesweetwatercabin.com/test.html

tutorial:
http://www.communitymx.com/content/a...ge=1&cid=BAD95

Thank you for your help.
matt

I've looked it over a bit, but I've got an early morning so I can't look more into it right now.
Add min-height: 100%; to your #maincontainer, I think that should lead you on the right track.

It didn't effect the layout.