Results 1 to 5 of 5

Thread: problem with div height, css

  1. #1

    problem with div height, css

    This is what I've got: http://adolfo.losdelacatarina.com

    It was made with 4 DIV tags (header, menu, barra and content). I want the content part to fill the rest of the window vertically but I can't do it. I've read some tutorials but nothing is working.

    This is the code:

    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    html, body {
     background: url(images/bg.gif) repeat;
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     height:100%;
    }
    #tableheight{
     height:100%;
    }
    #header{
        width: 614px;
        height: 130px;
     margin:0 auto;
    }
    #menu{
     width:614px;
     height:25px;
     margin:0 auto;
    }
    #barra{
     width:614px;
     height:16px;
     margin:0 auto;
    }
    #content{
     background-image:url(images/bg_content.gif);
     width:614px;
     height:auto;
     margin:0 auto;
    }
    .style1 {
     color: #FFFFFF;
     font-size: 0.6em;
     font-style: normal;
     font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    -->
    </style>
    <link href="estilos.css" rel="stylesheet" type="text/css"/>
    <script type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //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_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 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&&parent.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.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    <body onload="MM_preloadImages('images/index_07-over.gif','images/index_08-over.gif','images/index_09-over.gif','images/index_10-over.gif')">
    <div id="header"><img src="images/index_02.gif" width="91" height="130" /><img src="images/index_03.gif" width="117" height="130" /><img src="images/index_04.gif" width="174" height="130" /><img src="images/index_05.gif" width="232" height="130" /><br />
    <div id="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','images/index_07-over.gif',1)"><img src="images/index_07.gif" alt="inicio" name="inicio" width="91" height="25" border="0" id="inicio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portafolio','','images/index_08-over.gif',1)"><img src="images/index_08.gif" alt="portafolio" name="portafolio" width="117" height="25" border="0" id="portafolio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/index_09-over.gif',1)"><img src="images/index_09.gif" alt="bio" name="bio" width="72" height="25" border="0" id="bio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contacto','','images/index_10-over.gif',1)"><img src="images/index_10.gif" alt="contacto" name="contacto" width="102" height="25" border="0" id="contacto" /></a><img src="images/index_11.gif" width="232" height="25" /><br />
      <div id="barra"><img src="images/index_12.gif" width="614" height="16" /><br />
        <div id="content">
          <table width="97%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td valign="top"><p class="contenido2">Lorem ipsum natum scripta eruditi ex pro. Te pri alia reque nihil, ad usu ceteros efficiantur, virtute persequeris ex mel. Bonorum molestiae laboramus in mel, qui cu iisque convenire. In mel wisi omnis utinam, cu est nihil ignota officiis, sit ex impedit admodum voluptatum. Id duo similique delicatissimi, id qui omnes eligendi partiendo, ne duo commodo facilis patrioque. Te pro stet dolor, eum ei quodsi detracto honestatis.</p>
                <p class="contenido2">Utinam legere assueverit in sea, cu sed atqui aeque appareat, ne primis delicata mea. Atqui fabulas nam ea, pri in elitr noster dissentiet. Ex quot justo has. Elit graeco per cu, sed quod illud melius no. Nec enim vivendo placerat eu, te rebum clita sea. Ei mea tota error, ad quo postea adipiscing. At nonummy delicata assentior mea.</p>            
                </td>
            </tr>
            <tr>
              <td bgcolor="#333333"><div align="center" class="style1">Adolfo Arredondo Cantisani - 2006 </div></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    </div>
    </body>
    </html>
    I also tried to create a mainDIV (centered with 100%height) with the 4 layout divs inside. Even though the mainDIV gets centered and 100% height, nothing happened with the "content" div.
    Last edited by metatron; February 14th, 2006 at 10:13 PM.

  2. #2
    #tableheight{
    height:100%;
    }
    ?

    There is no need to specify height for the body element since by default it is 100% both width and height. DIVs only expand in height based on the content in the DIV. You may want to look into faux columns.

    http://www.alistapart.com/articles/fauxcolumns/

  3. #3
    sorry about that #tableheight, I was so desperate that I did crazy stuff, haha...

    Are you shure about the body element? In an article I saw that it should be placed there...

    Anyway, let me read the fauxcolumns content, thank you!

  4. #4
    it may be so, but I have not ever implimented that code in any of my styles, "that code' being setting the height and width property for the body it self. Let me know how it turns out.
    Last edited by thebloodpoolkid; February 15th, 2006 at 02:03 PM.

  5. #5
    I give up. I don't know hot to do it. I spent too much time in this and I can't spend more with a regular job. I'm doing it with tables

    However, I'll play with the code in free-time... I WILL NOT LET THAT "HEIGHT" VALUE WIN.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012