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

CSS box height

    • 36426
    • 197 Posts
    jonahnaylor Reply #1, 15 years, 6 months ago
    Hi I’m hoping someone can help. I have this website I’m setting up: http://www.bellezayork.co.uk and I’m wanting the page height to to fit whatever is on the page. however I’ve had to set the #bottomcontent div to height:700px as if it’s removed the border created goes above the page content. I’ve tried setting it to height:auto; or height:100%; but neither work... Can someone try this in firebug or similar?

    Is there a fix I can apply to this without messing everything up?

    Thanks, just trying to tidy it up.
      Yorkshire UK based hosting provider: https://www.simulant.uk
      • 22840
      • 1,572 Posts
      Paulp Reply #2, 15 years, 6 months ago
      Your probably not clearing your floats

      for the height on the box use the following:

      height: auto !important;
height: 200px;
min-height: 200px;


      Then before the closing div for the box add:

      <br class="clear-float" />


      Then in your css add:

      .clear-float {
clear: both;
height: 1px;
}
        • 26931
        • 2,314 Posts
        anonymized-26931 Reply #3, 15 years, 6 months ago
        do you mean a sticky footer? http://www.cssstickyfooter.com/
          • 36426
          • 197 Posts
          jonahnaylor Reply #4, 15 years, 6 months ago
          Quote from: paulp at Apr 15, 2011, 01:44 PM

          Your probably not clearing your floats

          for the height on the box use the following:

          height: auto !important;
height: 200px;
min-height: 200px;


          Then before the closing div for the box add:

          <br class="clear-float" />


          Then in your css add:

          .clear-float {
clear: both;
height: 1px;
}


          Hi thanks for the help but it doesn’t seem to work, see this page: http://www.bellezayork.co.uk/contact/

          It’s just making it 200px high but the contact form is overlapping the border at the bottom...
            Yorkshire UK based hosting provider: https://www.simulant.uk
            • 22840
            • 1,572 Posts
            Paulp Reply #5, 15 years, 6 months ago
            Looks like you need to put the br 1 div down but as I can’t edit it I can’t say for sure,

            You could also add overflow: hidden to the div which will make it drop down but I’m not sure if that works for IE7

            #bottomcontent {
border-left:1px solid #C5C5C5;
border-right:1px solid #C5C5C5;
height:auto !important;
height: 200px;
min-height:200px;
overflow:hidden;
width:898px;
}
              • 36426
              • 197 Posts
              jonahnaylor Reply #6, 15 years, 6 months ago
              hi again, thanks dropping the br class one div down works great. Thank you again for fixing this for me.n smiley
                Yorkshire UK based hosting provider: https://www.simulant.uk
                • 22840
                • 1,572 Posts
                Paulp Reply #7, 15 years, 6 months ago
                Glad you got it working,

                On your #bottomcontent you are missing a rule, change the below as the rules fix different browsers:

                #bottomcontent {
border-left:1px solid #C5C5C5;
border-right:1px solid #C5C5C5;
height:auto !important;
min-height:200px;
width:898px;
}


                To
                #bottomcontent {
border-left:1px solid #C5C5C5;
border-right:1px solid #C5C5C5;
height:auto !important;
height: 200px;
min-height:200px;
width:898px;
}
                  • 36426
                  • 197 Posts
                  jonahnaylor Reply #8, 15 years, 6 months ago
                  Ok thank you smiley
                    Yorkshire UK based hosting provider: https://www.simulant.uk