We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Containing div won't respect height of thumbscontainer

    • 22074
    • 4 Posts
    ojp Reply #1, 17 years, 5 months ago
    On this test page I’ve set up, the thumbnail set is contained within two divs (this test template is a very stripped down version of my actual template that exhibits the same problem):

    http://www.likha.org/index.php?id=418

    The call used is [[MaxiGallery]]. My containers won’t auto-adjust height with respect to the thumbnails. Why is that? In the big picture view the container is sized correctly. But in the thumbnail view the thumbnail rows flow outside of the container. Same result in ie, ff, safari. Probably has more to do with css than maxigallery specifically but your help is appreciated. =)

    Sincerely,
    Newbie.

    ps. Thanks!
      • 29525
      • 388 Posts
      Terry Reply #2, 17 years, 5 months ago

      Give this a try.

      Add a class="clearfix" to your container.

      Add this to your css. 

      .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from ie-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from ie-mac */


      For more on this: http://www.positioniseverything.net/easyclearing.html
        www.terrybarthdesign.com
        • 22074
        • 4 Posts
        ojp Reply #3, 17 years, 5 months ago
        hmm i see now that this problem is as old as time. I couldn’t make clearfix work in ie7, but this puts me in the right direction since there’s lots of discussion about this and other fixes. Thank you Terry.
          • 3707
          • 241 Posts
          bob1000 Reply #4, 17 years, 5 months ago
          Try adding overflow: auto; or overflow: hidden; to your CSS for the #content div.
          #content {
background-color:#FFFFFF;
border:1px solid #FF0000;
color:#888888;
padding:0 1.25em 3.38em 2.5em;
overflow: auto;
}
            • 22074
            • 4 Posts
            ojp Reply #5, 17 years, 5 months ago
            Hi bob ... i tried overflow: auto and that worked as well. ie6 needed a height value though. i wonder if this will cause scrollbars to appear in some instances. Thanks!
              • 3707
              • 241 Posts
              bob1000 Reply #6, 17 years, 5 months ago
              Yes, I forgot about IE6, a 1% height usually does the trick. And yes, scrollbars can appear under certain circumstances or with overflow: hidden, you can lose content. It hasn’t been a problem for me before though so you just need to test it to see if it suits your situation.