How to get CSS container to expand with text?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Kristal Y
    New Member
    • Jan 2011
    • 13
    #1

    How to get CSS container to expand with text?

    Hello,
    I've been searching over lots of forums for this solution and I can't seem to make any of the solutions work for me. This is my first time I'm posting a question and I'm also far from a css expert , but really am trying to convert my main layouts over from tables. Basically I need my #outerpermiter div which has a vertically repeating background to have a minimum height but expand when needed. Maybe I'm having trouble because I'm using a template, I have a background repeating image or ??? Below I put my template code and then my attached css code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- TemplateBeginEd itable name="doctitle" -->
    <title>Wisconsi n Event Video is more than Videography</title>
    <!-- TemplateEndEdit able -->
    <link href="../css/layout.css" rel="stylesheet " type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-image: url();
    background-color: #880000;
    }
    .italic {
    font-size: 14px;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    }
    .link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    }
    .heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #8F0F11;
    font-weight: bold;
    font-style: italic;
    }
    .bodytext {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000000;
    }
    -->
    </style>
    <link rel="stylesheet " type="text/css" href="../pro_dropdown_2/pro_dropdown_2/pro_dropdown_2. css" />

    <script src="file:///Macintosh HD/Users/kristalyoung/Desktop/pro_dropdown_2/pro_dropdown_2/stuHover.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    a:link {
    color: #880000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #880000;
    }
    a:hover {
    text-decoration: underline;
    color: #333333;
    }
    a:active {
    text-decoration: none;
    }
    .style1 {color: #000000}
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_swapImgResto re() { //v3.0
    var i,x,a=document. MM_sr; for(i=0;a&&i<a. length&&(x=a[i])&&x.oSrc;i++ ) x.src=x.oSrc;
    }
    function MM_preloadImage s() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.leng th,a=MM_preload Images.argument s; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!= 0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf ("?"))>0&&paren t.frames.length ) {
    d=parent.frames[n.substring(p+1 )].document; n=n.substring(0 ,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.fo rms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.l ayers&&i<d.laye rs.length;i++) x=MM_findObj(n, d.layers[i].document);
    if(!x && d.getElementByI d) x=d.getElementB yId(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_sw apImage.argumen ts; document.MM_sr= new Array; for(i=0;i<(a.le ngth-2);i+=3)
    if ((x=MM_findObj( a[i]))!=null){docum ent.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link href="../css/inside-layout.css" rel="stylesheet " type="text/css" />
    <style type="text/css">
    <!--
    .style2 {
    font-size: 24px;
    font-weight: bold;
    }
    -->
    </style>
    <!-- TemplateBeginEd itable name="head" --><!-- TemplateEndEdit able -->
    </head>

    <body onload="MM_prel oadImages('../images/r2c3-commercial-hover.jpg','../images/in-r2c2-residential-hover.jpg','../images/in-r2c3-commercial-hover.jpg')">
    <div id="outer_permi ter">
    <div id="tophalf">
    <div id="Row1">
    <div id="in-r1c1"></div>
    <div id="in-r1c2"><br />
    <a href="http://bytes.com/submit/index.html">Hom e</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://bytes.com/submit/about_milwaukee _plumbing.html" >About Us</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://bytes.com/submit/green_plumbing. html">Go Green</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://bytes.com/submit/tips_help.html" >Tips</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="http://bytes.com/submit/contact_milwauk ee_plumbing.htm l">Contact Us</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://bytes.com/submit/testimonials_mi lwaukee_plumbin g">Testimonials </a> </div>
    </div>
    <div id="Row2">
    <div id="in-r2c1"></div>
    <div id="in-r2c2"><a href="http://bytes.com/submit/residential_plu mbing_services. html" onmouseout="MM_ swapImgRestore( )" onmouseover="MM _swapImage('res idential plumbing services','','. ./images/in-r2c2-residential-hover.jpg',1)"> <img src="http://bytes.com/submit/images/in-r2c2-residential.jpg " alt="residentia l plumbing services" name="residenti al plumbing services" width="229" height="99" border="0" id="residentia l plumbing services" /></a></div>
    <div id="in-r2c3"><a href="http://bytes.com/submit/commercial_plum bing_services.h tml" onmouseout="MM_ swapImgRestore( )" onmouseover="MM _swapImage('Com mercial Plumbing Services','','. ./images/in-r2c3-commercial-hover.jpg',1)"> <img src="http://bytes.com/submit/images/in-r2c3-commericial.jpg " alt="Commercial Plumbing Services" name="Commercia l Plumbing Services" width="230" height="99" border="0" id="Commercial Plumbing Services" /></a></div>
    <div id="in-r2c4">
    <p>all<br />
    <span class="style2"> 414-257-9000</span><br />
    For Immediate Service</p>
    </div>




    <div id="RowBottom"> <!-- TemplateBeginEd itable name="body" -->
    <table width="90%" align="center" cellpadding="10 ">
    <tr>
    <td class="bodytext "><p class="heading" >&quot;Qualit y Craftsmanship, Professionalism and Superior Customer Service&quot;</p>
    <p class="italic"> “We pride ourselves on quality of plumbing and piping work that we provide. Customer satisfaction is our primary goal. Our technicians are trained and certified in various plumbing specialties, which ensures quality workmanship and reliable service.”</p>
    <p align="right" class="italic"> Al Holtz, President and Master Plumber of Milwaukee Plumbing &amp; Piping Inc.</p>
    <p>Milwaukee Plumbing &amp; Piping Inc. offers a wide range of both residential and commercial plumbing services. Some services include: plumbing and piping installations, sewer and drains, home appliance connections, water lines, medical gas installation, solar heating systems, mechanical piping, boilers, pump repair and installation, and routine and preventative maintenance. <a href="http://bytes.com/submit/about_milwaukee _plumbing.html" >Read more about us</a></p></td>
    </tr>
    </table>
    <!-- TemplateEndEdit able -->
    <div id="RowBtm-footer">
    <p>11200 West Greenfield Avenue • Milwaukee, WI 53214 • 414-257-9000 • fax: 414-257-9104</p>
    <p class="blacklin k"><a href="http://bytes.com/submit/index.html" class="style14" ><span class="style14 style1">Home</span></a><span class="style15" > | <a href="http://bytes.com/submit/about_milwaukee _plumbing.html" ><span class="style14 style1">About</span> <span class="style14 style1">Us</span></a> | <a href="http://bytes.com/submit/residential_plu mbing_services. html"><span class="style14 style1">Residen tial</span> <span class="style14 style1">Service s</span></a> | <a href="http://bytes.com/submit/commercial_plum bing_services.h tml" class="style1"> <span class="style14 style1">Commerc ial</span> <span class="style14 style1">Service s</span></a> | <a href="http://bytes.com/submit/green_plumbing. html"><span class="style14 style1">Go</span> <span class="style14 style1">Green</span> </a>| </span><a href="http://bytes.com/submit/tips_help.html" class="style14" ><span class="style14 style1">Tips</span></a> <span class="style15" >| <a href="http://bytes.com/submit/contact_milwauk ee_plumbing.htm l"><span class="style14 style1">Contact </span> <span class="style14 style1">Us</span></a> | </span><a href="http://bytes.com/submit/testimonials_mi lwaukee_plumbin g"><span class="style14 style1">Testimo nials</span></a> </p>
    </div>
    </div></div>

    </div>

    <div style="clear:le ft;"></div>

    </div>
    </body>
    </html>

    ATTACHED CSS CODES:

    LAYOUT.CSS=

    @charset "UTF-8";
    #outer_permiter {
    background-image: url(../images/pipe-background.gif) ;
    background-repeat: repeat-y;
    width: 1000px;
    margin-left: -500px;
    position: absolute;
    top: 0px;
    left: 50%;
    overflow: visible;
    height: 100%;
    }
    #tophalf {
    width: 883px;
    margin-left: -442px;
    position: absolute;
    top: 0px;
    left: 50%;
    }
    #Row1 {
    width: 883px;
    }
    #R1C1 {
    float: left;
    width: 264px;
    height: 51px;
    background-image: url(../images/r1c1.gif);
    }
    #R1C2 {
    width: 619px;
    float: left;
    background-image: url(../images/r1c2-navbar.jpg);
    height: 51px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #880000;
    text-align: center;
    }
    #Row2 {
    width: 883px;
    clear: left;
    }
    #R2C1 {
    float: left;
    width: 264px;
    height: 85px;
    background-image: url(../images/r2c1-logo.jpg);
    }
    #R2C2 {
    height: 85px;
    width: 345px;
    float: left;
    background-image: url(../images/r2c2-residential.jpg );
    }
    #R2C3 {
    background-image: url(../images/r2c3-commercial.jpg) ;
    float: left;
    height: 85px;
    width: 274px;

    }
    #Row3 {
    clear: left;
    width: 883px;
    }
    #R3C1 {
    background-image: url(../images/r3c1-call.jpg);
    float: left;
    height: 248px;
    width: 264px;
    }
    #R3C2 {
    background-image: url(../images/r3c2.jpg);
    float: left;
    height: 248px;
    width: 176px;
    }
    #R3C3 {
    float: left;
    height: 248px;
    width: 443px;
    background-image: url(../images/r3c3-testimonial.jpg );
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-style: italic;
    }
    #RowBottom {
    clear: left;
    width: 883px;
    background-color: #FFFFFF;
    }
    #RowBtm-footer {
    background-image: url(../images/rbtm-footer.jpg);
    background-repeat: repeat-x;
    float: left;
    width: 883px;
    font-family: Arial, Helvetica, sans-serif;
    color: #880000;
    text-align: center;
    height: 75px;
    background-color: #880000;
    font-weight: bold;
    clear: left;
    }
    .clearleft {
    clear: left;
    }

    INSIDE-LAYOUT.CSS=

    @charset "UTF-8";
    #in-r1c1 {
    height: 51px;
    width: 216px;
    float: left;
    background-image: url(../images/in-r1c1.jpg);
    }
    #in-r1c2 {
    float: left;
    height: 51px;
    width: 667px;
    background-image: url(../images/in-r1c2-navbar.jpg);
    font-weight: bold;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #880000;
    }
    #in-r2c1 {
    float: left;
    height: 99px;
    width: 216px;
    background-image: url(../images/in-r2c1-logo.jpg);
    }
    #in-r2c2 {
    background-image: url(../images/in-r2c2-residential.jpg );
    float: left;
    height: 99px;
    width: 229px;
    }
    #in-r2c3 {
    background-image: url(../images/in-r2c3-commericial.jpg );
    float: left;
    height: 99px;
    width: 230px;
    }
    #in-r2c4 {
    background-image: url(../images/in-r2c4.jpg);
    float: left;
    height: 99px;
    width: 208px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #880000;
    }


    I APPOLOGIZE IF MY STANDARD OF SUBMITTING THIS CODE IS INCORRECT, BUT LIKE I SAID IT'S MY FIRST QUESTION TO POST. THANK YOU SO MUCH FOR ANY HELP!!
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      You need to include your markup in code tags. Also, if this is online, it's far easier to help since we don't have to get images and copy/paste/format everything to view it.

        Comment

        Previous template Next
        Working...