[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Variable height box with rounded corners CSS

Posted on 2008-11-03
5
Medium Priority
?
783 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:qdh
  • 2
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 1600 total points
ID: 22872377
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
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 400 total points
ID: 22872380
#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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22872385
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
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 22872416
@scrathcyboy: your solution doesnt work because the height:100% makes the min-height useless... and ie6 doesnt support min-height
0
 

Author Comment

by:qdh
ID: 22872836
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question