Min-height and max-height? Help!

5 replies
  • WEB DESIGN
  • |
On my first website all my pages are defined heights the "wrapper" or container is set to height: 1000px;. I'm now developing my second website and i cant seem to get the min-height and max-height working properly. The wrapper contains two divs the side container and right container these heights are set to auto. The wrapper never wants to contain the right container. the wrapper always seems to go to the min-height? Please help
#maxheight #minheight
  • Profile picture of the author Big Squid
    Check the CSS to see if the DIVs are floated.
    {{ DiscussionBoard.errors[3190072].message }}
    • Profile picture of the author brandon2664
      The divs are floated sidecontainer floats to the left and rightcontainer floats to the right. Is that where the problem is? Because I think I have to float them to accomplish my layout.
      {{ DiscussionBoard.errors[3192277].message }}
      • Profile picture of the author csmcmanus
        forget about min max heights your gonna be pulling your hair out, specially if this is only your second site.

        float both your divs to the left and put your height to auto.

        like so
        Your css
        Code:
        #container {
        	background-color: #333333;
        	height: auto;
        	width: 1000px;
        	margin-right: auto;
        	margin-left: auto;
        }
        #right {
        	margin: 0px;
        	float: left;
        	height: auto;
        	width: 450px;
        }
        #left {
        	background-color: #666666;
        	margin: 0px;
        	padding: 5px;
        	float: left;
        	height: auto;
        	width: 450px;
        }
        .clearfloat { 
        	clear:both;
            height:0;
            font-size: 1px;
            line-height: 0px;
        }
        your html
        Code:
        <body>
        <div id="container">
          <div id="left">Content for  id "left" Goes Here</div>
          <div id="right">Content for  id "right" Goes Here</div><br class="clearfloat" />
        </div>
        </body>
        you can add padding to the tops, bottoms and sides to avoid the ie6 float bug and lack of content on one of the columns.
        {{ DiscussionBoard.errors[3195120].message }}
        • Profile picture of the author brandon2664
          Originally Posted by csmcmanus View Post

          forget about min max heights your gonna be pulling your hair out, specially if this is only your second site.

          float both your divs to the left and put your height to auto.

          you can add padding to the tops, bottoms and sides to avoid the ie6 float bug and lack of content on one of the columns.
          Thanks a lot i will try this later today. I have yet to pull my hair out, but its getting close.
          {{ DiscussionBoard.errors[3196953].message }}
          • Profile picture of the author brandon2664
            Works like a charm I really appreciate the help. Thanks csmcmanus
            {{ DiscussionBoard.errors[3200023].message }}

Trending Topics