SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Div Height

    Hello

    Please help me to adjust a div height in mozila and firefox

    url : http://www.binaryvibes.com/dcss/

    if you will open the above url in IE it works fine but not works in mozila or firefox.
    Simply i want to increase the size of left panel div according to content div
    is it possible through css?

    Thanks

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    You may as well get rid of height: 100% as that won't help you. Unfortunately, what you're trying to do would be a lot easier to accomplish with tables.

    The easiest way to do it with <div>'s is to create a background image that tiles down the container div, drawing both the left and the right column.

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Location
    Pakistan
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i know this tech. but is there any way to controll the div height dynamicaly

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I emailed you the answer to this earlier

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>DCSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" title="currentStyle" media="screen">
    * {margin:0;padding:0}
    #header {
     font-family: Tahoma, Arial, Verdana;
     font-size: 18px;
     font-weight: bold;
     color: #FFFFFF;
     background-color: #000099;
     height: 150px;
     width: 780px;
    }
    #header span {
     padding: 10px;
     margin: 10px;
    }
    #header h1 {
     padding: 0px;
     margin: 0px;
    }
    #lpanel {
     background:transparent;
     width: 180px;
     float: left;
     margin-left:-180px;
     position:relative;
     left:-1px
    }
    #content {
     background-color: #FFFFCC;
     width: 597px;
     border-left: 1px solid #CCCCCC;
     margin-left:180px;
    }
    #inner-content {
     float: left;
     width:100%;
    }
    #container {
     min-height: 400px;
     width: 780px;
     background-color: #d6d6d6;
     border-bottom: 1px solid #CCCCCC;
    }
    /* mac hide \*/
    * html #container {height:400px}
    * html #lpanel{margin-right:-3px}
    * html #content{width:598px}
    /* end hide */
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
    }
    </style>
    <link rel="Shortcut Icon" type="image/x-icon" href="http://www.csszengarden.com/favicon.ico" />
    </head>
    <body>
    <div id="header"> 
      <h1>Header</h1>
    </div>
    <div id="container"> 
      <div id="content"> 
    	<div id="lpanel"> 
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	</div>
    	<div id="inner-content"> 
    	  <p>Content</p>
    	  <p>Content</p>
    	  <p>Content</p>
    	</div>
    	<div class="clearer"></div>
      </div>
    </div>
    </body>
    </html>
    Either column will be the longest and the columns will equalise. Is that not what you wanted?

    See the three col demo sticky thread for more examples and the explanation

  5. #5
    SitePoint Member
    Join Date
    May 2005
    Location
    Pakistan
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear your codei is not working in firefox??

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Dear your codei is not working in firefox??
    Dear try this

    http://www.pmob.co.uk/temp/test2col.htm


Bookmarks

Posting Permissions

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