Variable height box with rounded corners CSS

Hi,

I'm trying to make a rounded corner box to display main content in. I would like the box to normally be 494pixels in height even if there is only a small amount of text in it, and then expand to accommodate a lot of text.

If you look at the page http://www.qecomm.com/template.html. I have commented out a few things so that the box expands with the text in it:

#maincontent {
      position:absolute;
      margin:0px auto;
        background:#fff url(http://www.qecomm.com/l.gif) repeat-y left top;
      left:167px;
      top:183px;
      width:751px;
      /*height:494px;*/
}

also

.center-content {
      position:relative;
      background:url(http://www.qecomm.com/r.gif) repeat-y right top;
      padding:0px 18px 0px 18px;
      margin:-1px 0 -65px 0;
      /*height:93%;*/
}

If you remove these comments the box will be resized to the default size I am looking for. But if you add more text than the box can take it overflows. Basically I just want a minimum height, but I wasn't able to get it to work and I need it to work in IE6 and I read it doesn't work in IE6?

I have tried putting a table in the div to see if I could get it to work that way. But the rounded corners didn't display correctly. I also tried putting in a transparent GIF with a set height, but that didn't seem to work when displayed in the browser.

I'm just not sure what the best way to fix this. Even if there was some script that would expand assign the box to expand when needed etc might work too?

Thanks,
Quintin
qdhAsked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
Hello,

You will want to use the css min-height property. Unfortunately, its not supported in ie6. However, i6 treats height like min-height... so we can do this:

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

Regards
0
 
scrathcyboyConnect With a Mentor Commented:
#maincontent   (  height:100%; min-height:494px;  }

Use that, it should do what you want, and make sure to test it in IE7, IE6 and FF2 and FF3.
0
 
scrathcyboyCommented:
Oh and I forgot to mention, for the hight:100% to work right, you also have to do this in CSS --

BODY, HTML  {height:100%; min-height:100% }
0
 
Mark StegglesWeb DeveloperCommented:
@scrathcyboy: your solution doesnt work because the height:100% makes the min-height useless... and ie6 doesnt support min-height
0
 
qdhAuthor Commented:
Thanks for all the help guys. I tried so many different things, I was beginning to think it wasn't possible. If any one else is having a similar issue, here is the final code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
      text-align:center;
      margin:0;
      padding:0;
      background-color:#46166b;
}
p {
      margin:0 0 0 0;
}
ul.topmenulist{
    margin: 0 auto;
}
ul.topmenulist li{
    text-align: right;
    float: right;
    list-style: none;
    margin: 0px;
      padding: 0px 0px 0px 15px;
}
ul.leftmenulist li{
      list-style: none;
    margin: 0px;
      padding: 0px 0px 5px 0px;
}
#wrapper {
      position:relative;
      width:938px;
      margin:0 auto;
      text-align:left;
}
#wrapperfooter {
      position:relative;
      width:938px;
      margin:0 auto;
      text-align:left;
}
#header {
      position:absolute;
      left:0px;
      top:20px;
      width:938px;
      height:127px;
}
#topmenu {
      position:absolute;
      left:0px;
      top:148px;
      width:938px;
      height:34px;
}
#leftmenu {
      position:absolute;
      left:0px;
      top:183px;
      width:166px;
      height:494px;
}
#maincontent {
      position:absolute;
      margin:0px auto;
    background:#fff url(l.gif) repeat-y left top;
      left:167px;
      top:183px;
      width:751px;
      min-height:494px;
}
#footer {
      position:absolute;
      left:0px;
      bottom:20px;
      width:938px;
      height:100px;
}
#topmenutext {
      position:absolute;
      left:20px;
      top:161px;
      width:851px;
      height:15px;
}
.top {
      width:751px;
      height:17px;
      background:url(t.gif) no-repeat left top;
}
.center-content {
      position:relative;
      background:url(r.gif) repeat-y right top;
      padding:0px 18px 0px 18px;
      margin:-1px 0 -65px 0;
      min-height:459px;
    height:auto !important;
    height:459px;
}
.bottom {
      width:751px;
      height:84px;
      background:url(b.gif) no-repeat left bottom;
}
.topmenutextfont {
      font-family:verdana,arial,helvetica,sans-serif;
      color:#FFFFFF;
      font-size:12.5px;
}
.leftmenutextfont {
      font-family:verdana,arial,helvetica,sans-serif;
      color:#FFFFFF;
      font-size:12.5px;
}
.leftmenutextcurrentfont {
      font-family:verdana,arial,helvetica,sans-serif;
      color:#904383;
      font-size:12.5px;
      font-weight:bold;
}
a.topmenutextlink:link {
      text-decoration:none;
      color:#FFFFFF;
}
a.topmenutextlink:visited {
      text-decoration:none;
      color:#FFFFFF;
}
a.topmenutextlink:hover {
      font-weight:bold;
      color:#FFFFFF;
}
a.leftmenutextlink:link {
      text-decoration:none;
      color:#FFFFFF;
}
a.leftmenutextlink:visited {
      text-decoration:none;
      color:#FFFFFF;
}
a.leftmenutextlink:hover {
      font-weight:bold;
      color:#FFFFFF;
}
-->
</style>
</head>

<body>
<div id="wrapper">
      <div id="header"></div>
  <div id="topmenu"></div>
    <div id="topmenutext">
            <font class="topmenutextfont">
              <ul class="topmenulist">
                <li><a class="topmenutextlink">E-Newsletter</a></li>
                <li><a class="topmenutextlink">Contact Us</a></li>
                <li><a class="topmenutextlink">About Us</a></li>
                      <li><a class="topmenutextlink">Home</a></li>

                  </ul>
          </font>
    </div>
        <div id="leftmenu">
              <ul class="leftmenulist">
                <li><a class="leftmenutextlink">Products</a></li>
                <li><a class="leftmenutextlink">Promotions</a></li>
                <li><a class="leftmenutextlink">Find a Distributor</a></li>
                <li><a class="leftmenutextlink">Education</a></li>
                <li><a class="leftmenutextlink">Support Tools</a></li>
                <li><a class="leftmenutextlink">Business</a></li>
                <li><a class="leftmenutextlink">Trend Report</a></li>
                <li><a class="leftmenutextlink">News & Events</a></li>
                  </ul>
    </div>
    <div id="maincontent">
   
                    <div class="top"></div>
                <div class="center-content">
                    <p>
                              Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test  
                    </p>
                </div>
                <div class="bottom"></div>
    </div>
</div>
</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.