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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark StegglesWeb 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
scrathcyboyCommented:
#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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.