Resizing layers as new comments are added

**lukeump** · 03-12-2008, 07:01 PM

I am adding a comments form to some of my pages. As comments are added I would like the layer to resize to accomodate them and the footer beneath it to move in tandem.

I have been told that using 'overflow:visible' is not compatible with FF. Importantly when the layer resizes, how can any content beneath it (footer) move further down the page also?

Your help would be mega appreciated.

**Medyman** · 03-13-2008, 03:30 AM

It would best if you posted some code and/or a link to a test page with the problem.

1) Overflow:visible is the default value. Unless you're explicitly changing it elsewhere, there is no point in add this property. And, yes, it does work in FF.

2) Are you hardcoding the height of whatever element your comments come into? With a overflow:hidden property? That might be a reason why they're not showing up. A solution would be to not specify the height at all. This way, the div will expand to encompass all of your content, thereby increasing in height and moving the footer down in the process.

Hope that helps. Otherwise, please post a link so that we can see what's going on. Sounds like other problems are afoot.

**lukeump** · 03-13-2008, 11:58 AM

Originally Posted by Medyman

It would best if you posted some code and/or a link to a test page with the problem.

1) Overflow:visible is the default value. Unless you're explicitly changing it elsewhere, there is no point in add this property. And, yes, it does work in FF.

2) Are you hardcoding the height of whatever element your comments come into? With a overflow:hidden property? That might be a reason why they're not showing up. A solution would be to not specify the height at all. This way, the div will expand to encompass all of your content, thereby increasing in height and moving the footer down in the process.

Hope that helps. Otherwise, please post a link so that we can see what's going on. Sounds like other problems are afoot.

Many thanks for your reply.

OK, I have gathered the code for your perusal below. All apdivs are centered within a containing relative div. No overflow values are set as yet.

Page Code

HTML Code:

<div id="container">
  <div id="title">
    <h1><<NAME>></h1>
  </div>
  <div id="rightad"><a href="http://www.linkfame.com/peternorthdvd/go.php?pr=8&amp;su=1&amp;si=100&amp;pa=index&amp;ar=&amp;ad=177340&amp;campaign=1384" target="_blank"></a></div>
  <div id="flashplayer"><<FALSHPLAYER>></div>
  <div id="vdetails">
    <div class="heading" id="detailshd">Details:</div>
    <div id="details">
      <table width="100%" cellpadding="5" cellspacing="0">
        <tr>
          <td colspan="2" ><span class="dtheading">- From:</span> <span class="mediumlink"><a href="<<FROMMOVIELINK>>" target="_blank"><<FROMMOVIE>></a></span>
          <div class="mediumlink"></div></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Length:</span> <span class="mediumtext"><<VIDLENGTH>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Views:</span> <span class="mediumtext"><<VIEWCOUNT>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Starring:</span> <span class="mediumtext"><<STARRING>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Date Added:</span> <span class="mediumtext"><<DATE>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><img src="graphics/LightLinePixel.gif" width="435" height="1" /></td>
        </tr>
        <tr>
          <td class="smalltext">URL:
          <label></label></td>
          <td><input name="URL" type="text" id="URL" value="&lt;&lt;URL&gt;&gt;" size="60" /></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="comments">
    <div class="heading" id="commentshd">Add your comments: </div>
    <br />
    <br />
  <<COMMENTS>><br />
  <br />
  <label></label>
  </div>
  <div id="relvids">
    <div class="heading" id="relvidhd">Related Videos: </div>
    <br />
    <br />
  <<RELATEDLIST>></div>
  <div id="footer">
    <div align="center">Footer Navigation and Copyright </div>
  </div>
</div>

External Style Sheet Code

Code:

#container {
	position:relative;
	width:760px;
	z-index:1;
	margin-right: auto;
	margin-left: auto;
	height: 1200px;
}
#title {
	position:absolute;
	left:0px;
	top:10px;
	width:400px;
	height:25px;
	z-index:1;
}
#rightad {
	position:absolute;
	left:476px;
	top:45px;
	width:285px;
	height:288px;
	z-index:2;
}
#flashplayer {
	position:absolute;
	left:0px;
	top:45px;
	width:450px;
	height:400px;
	z-index:3;
}
#vdetails {
	position:absolute;
	left:0px;
	top:475px;
	width:450px;
	height:235px;
	z-index:4;
	border: 1px solid #CCCCCC;
}
#comments {
	position:absolute;
	left:0px;
	top:735px;
	width:450px;
	z-index:7;
	border: 1px solid #CCCCCC;
	height: 400px;
}
#relvids {
	position:absolute;
	left:475px;
	top:475px;
	width:285px;
	z-index:6;
	border: 1px solid #CCCCCC;
}
#detailshd {
	position:absolute;
	left:5px;
	top:5px;
	width:70px;
	height:20px;
	z-index:1;
}
#commentshd {
	position:absolute;
	left:5px;
	top:5px;
	width:190px;
	height:20px;
	z-index:1;
}
#details {
	position:absolute;
	left:5px;
	top:35px;
	width:435px;
	height:185px;
	z-index:2;
}
#relvidhd {
	position:absolute;
	left:5px;
	top:5px;
	width:151px;
	height:28px;
	z-index:1;
}
#footer {
	position:absolute;
	left:0px;
	width:760px;
	height:110px;
	z-index:1;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	background-color: #E1E1E1;
	top: 1090px;
}

#copyright {
	position:relative;
	left:280px;
	top:125px;
	width:200px;
	height:20px;
	z-index:1;

**Medyman** · 03-13-2008, 03:49 PM

Ok, I see what's going on.

It's because you have EVERYTHING absolutely positioned. To fix the problem you're going to have to redo your markup.

I'm not sure why you have absolutely positioned. Maybe you have a valid reason, though I can't think of what that might be. I'm guessing it's because you want the related vids div to the right and perhaps don't know about CSS floats.

Anyway, I cleaned up your code a bit, added 1 line of CSS to the #relvids id, and added one extra div that surrounds the related vids and the vid details divs.

The main problem was two-fold:
The issue about the comment div not expanding is because you had declared it's height. Now, it will with more content if it were filled, but the footer div was absolute positioned under the comment div (at that stated height), so even as the comment div expanded the footer would be underneat the text. Now, I've removed the height. If you enter more comments, the div will expand, and the footer will move down with it.

I suspect that your code could be cleaned up more but it's hard to know with just seeing a wireframe. Why do you have the headings in their own divs for example? Also, why do you have heights and widths specified for these? You're also declaring a lot of classes (headers, dtlist, dtheading, etc..) that aren't in y our CSS. Not sure if you included your entire CSS in your post though, so this might exist elsewhere.

Anyway, here is fixed up version.

Code:

<html>
<head>
<style>
#container {
	width:760px;
	margin: 0 auto;
}
#title {
	width:400px;
	height:25px;
}
#rightad {
	width:285px;
	height:288px;
}
#flashplayer {
	width:450px;
	height:400px;
}
#vdetails {
	width:450px;
	height:235px;
	border: 1px solid #CCCCCC;
}
#comments {
	width:450px;
	z-index:7;
	border: 1px solid #CCCCCC;
}
#relvids {
	width:285px;
	border: 1px solid #CCCCCC;
	/* Edit - Add */
	float:right;
}
#detailshd {
	width:70px;
	height:20px;
}
#commentshd {
	width:190px;
	height:20px;
}
#details {
	width:435px;
	height:185px;
}
#relvidhd {
	width:151px;
	height:28px;
}
#footer {
	width:760px;
	height:110px;
	border:1px solid #ccc;
	border-width:1px 0;
	background-color: #E1E1E1;
}

#copyright {
	position:relative;
	left:280px;
	top:125px;
	width:200px;
	height:20px;
	z-index:1;
</style>
</head>
<body>
<div id="container">
  <div id="title">
    <h1><<NAME>></h1>
  </div>
  <div id="rightad"><a href="http://www.linkfame.com/peternorthdvd/go.php?pr=8&amp;su=1&amp;si=100&amp;pa=index&amp;ar=&amp;ad=177340&amp;campaign=1384" target="_blank"></a></div>
  <div id="flashplayer"><<FALSHPLAYER>></div>
  
  <!-- Container that holds "relvids" & "vdetails"-->
  <div id='container'>
  <div id="relvids">
    <div class="heading" id="relvidhd">Related Videos: </div>
    <br />
    <br />
	<<RELATEDLIST>>
  </div>
  <div id="vdetails">
    <div class="heading" id="detailshd">Details:</div>
    <div id="details">
      <table width="100%" cellpadding="5" cellspacing="0">
        <tr>
          <td colspan="2" ><span class="dtheading">- From:</span> <span class="mediumlink"><a href="<<FROMMOVIELINK>>" target="_blank"><<FROMMOVIE>></a></span>
          <div class="mediumlink"></div></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Length:</span> <span class="mediumtext"><<VIDLENGTH>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Views:</span> <span class="mediumtext"><<VIEWCOUNT>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Starring:</span> <span class="mediumtext"><<STARRING>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><span class="dtheading">- Date Added:</span> <span class="mediumtext"><<DATE>></span></td>
        </tr>
        <tr>
          <td colspan="2" class="dtlist"><img src="graphics/LightLinePixel.gif" width="435" height="1" /></td>
        </tr>
        <tr>
          <td class="smalltext">URL:
          <label></label></td>
          <td><input name="URL" type="text" id="URL" value="&lt;&lt;URL&gt;&gt;" size="60" /></td>
        </tr>
      </table>
    </div>
  </div>
  </div>
  <div id="comments">
    <div class="heading" id="commentshd">Add your comments: </div>
    <br />
    <br />
  <<COMMENTS>><br />
  <br />
  <label></label>
  </div>
 
  <div id="footer">
    <div align="center">Footer Navigation and Copyright </div>
  </div>
</div> 
</body>
</html>

**lukeump** · 03-13-2008, 06:40 PM

Many thanks for reply, I understand exactly what your saying in terms of absolute positioning.

The only problem I have is my lack of knowledge. I use absolute positioning because I don't know anything else (click the layer button and off I go).

So, the code you have provided uses 'div tags' I think, but I don't actually know how to manipulate the position of those divs.

You can't teach me how to use CSS in one thread, but any helpfull tips would be much appreciated!

**lukeump** · 03-13-2008, 08:39 PM

No worries! With a bit of playing around and learning as I build, I've just figured out how to implement the above code and a little more about how to position divs.

Many thanks for your help!

**Medyman** · 03-13-2008, 09:47 PM

You're welcome. If you have any other questions, that's what this forum is for. Feel free to post

.

You might want to check out this (http://css.maxdesign.com.au/floatutorial/). It's a tutorial on floats. That's actually what I used to get that related videos div to go to the right (the div actually already existed).

I didn't add anything to your markup except a container div (which really isn't necessary exceppt for markup organizational purposes). It's all CSS

Thread: Resizing layers as new comments are added

Thread Tools

Search Thread

Resizing layers as new comments are added

Bookmarks

Bookmarks

Posting Permissions