Sigh. It stopped working, I'm not sure what happened.
The bottom line is, I have a container div, and two column divs within it, floated to the left and the right, respectively. I applied the column hack to the columns, and set the container to overflow: hidden. And...the columns are expanding the container to beyond the size of the content. There's no height attribute set anywhere, I made sure of that. The hack is padding-bottom: 100px and margin-bottom: -100px. Thanks again, Eugene On Thu, Nov 19, 2009 at 9:59 AM, Eugene Hourany <ehour...@gmail.com> wrote: > I just had a huge "duh" moment. > > I applied the margin/padding rules to the inner column divs, then removed > them from there and applied them to the outer div, thinking that all it was > going to do was expand the border, when I realized I hadn't set the > backgrounds of either of the outer column div containers! > > So when I did this, it worked on both IE and FF. > > Thanks for your help David! :D > > Eugene > > > On Thu, Nov 19, 2009 at 9:39 AM, David Hucklesby <huckle...@gmail.com>wrote: > >> Eugene Hourany wrote: >> [...] >> >>> >>> Here's the HTML code in question in quasi-pseudocode fashion: >>> >>> <div class="home_bttm_section" id="section1"> <!-- top container --> <div >>> class="home_bttm_block" id="home_races"> <!-- container for 1st column --> >>> <div class="home_bt_hdr" id="home_races_hdr"> <!-- title >>> of 1st column --> </div> <div class="home_bt_sort"> <!-- select menu >>> --> </div> <!-- container of pull-down menu --> <div >>> class="home_bttm_list"> <!-- the content that's dynamically being resized >>> according to content --> <table> <!-- yeah there's a table in >>> here --> </div> <!--<div class="home_bttm_table_ft"></div>--> <!-- >>> footer, commented out for now --> </div> <!-- close the 1st column >>> --> <div class="home_bttm_block" id="home_races"> <!-- container for >>> 2nd column --> <div class="home_bt_hdr" id="home_races_hdr"><!-- >>> title of 2nd column --> </div> <div class="home_bt_sort"> <!-- select >>> menu --> </div> <!-- container of pull-down menu --> <div >>> class="home_bttm_list"> <!-- the content that's dynamically being resized >>> according to content --> <table> <!-- yeah there's another >>> table in here --> </div> <!--<div >>> class="home_bttm_table_ft"></div>--> <!-- footer, commented out for >>> now --> </div><!-- close 2nd column --> </div> <!-- close container> >>> >>> TIA! >>> >>> Eugene >>> >>> On Wed, Nov 18, 2009 at 4:59 PM, David Hucklesby >>> <huckle...@gmail.com>wrote: >>> >>> Eugene Hourany wrote: >>>> >>>> Hi gang, >>>>> >>>>> I'm having some difficulty making the same div height trick work >>>>> in IE 7. Of course, it works just fine in Firefox 3.5. I need it >>>>> to also work in IE 6 and 8. >>>>> >>>>> Here's a link that discusses how to do it: >>>>> http://www.ejeliot.com/blog/61(I'm<http://www.ejeliot.com/blog/61%28I%27m> >>>>> <http://www.ejeliot.com/blog/61%28I%27m>not >>>>> >>>>> using "faux columns" as there are dynamic background images). >>>>> >>>>> I apply the overflow: hidden attribute to the parent container, >>>>> but it's not working. The shorter column doesn't reach down to >>>>> match the height of the longer one, as expected. >>>>> >>>>> The problem I think is that the columns are containers themselves >>>>> of content. I'm applying the margin/padding-bottom trick on the >>>>> innermost content of the columns, as applying them to the column >>>>> containers >>>>> seems to do no good. >>>>> >>>>> >>>>> Still not sure I understand your problem, since you don't show the >>>> relevant HTML... Any road, you may like to try out these >>>> alternatives: >>>> >>>> Companion Columns - http://www.satzansatz.de/cssd/companions.html >>>> >>>> Equal Height Columns with... No Hacks >>>> >>>> >>>> http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks >>>> >>>> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ >> >> I'm still not sure how you are positioning those columns, but if they >> are independent of each other - floated left and right, say - then >> adding padding to the bottom of the inner DIV is not going to help, as >> the negative margin will not "pull up" the bottom of the outer DIV. >> Margins don't transfer themselves to the container! >> >> Doubtless you have already found that out. Still, I would have thought >> that applying the padding-/margin-bottom to the outer container of each >> column would work - unless it's because they both have the same ID >> applied, which could upset your CSS... >> >> I also don't understand why the alternative solutions won't work for >> you. There is clearly something about your design I don't understand. >> Providing a link to your problem page might give us something to work >> on... >> >> Cordially, >> David >> -- >> >> > ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
