I'd like to have the text in the second div set for "overflow: visible" so that all the displayed blogger posts in the body section in that div will display and lengthen the webpage instead of having an ugly scrollbar (not saying the entire page isn't ugly anyway). When I change the overflow from auto to visible, though, the page width increases.Can anyone tell me why this occurs, and perhaps how to fix it?
<!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><title>Supernova</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">/* Background Color */body {background-color: #000000}h1 {background-color: #000000}h2 {background-color: #000000}p {background-color: #000000}/* Text Color */h1 {color: #FFFFFF}h2 {color: #FFFFFF}p {color: #FFFFFF}/* Div */div{background-color:#000000;border-style: none;}/* Div Classes */div.pos_abs0{position:absolute;overflow: inherit;z-index:+1;top: 0;left: 0;width: 1014;height: 100;}div.pos_abs1{position:absolute;overflow: auto;padding: 5px;width:200px;height:490px;left:5px;top:105px;}div.pos_abs2{position:absolute;overflow: visible;padding: 5px;width:500px;height:490px;left:220px;top:105px}div.pos_abs3{position:absolute;overflow: auto;padding: 5px;width:274px;height:490px;left:735px;top:105px}</style></head><body marginheight="0" marginwidth="0"><div class="pos_abs0"><img src="http://img.photobucket.com/albums/v316/Jedgar/Top.jpg" height="100" width="1024"></div><div class="pos_abs1"><p>Column</p></div><div class="pos_abs2"><title><$BlogPageTitle$></title><$BlogMetaData$><!-- Begin #content --><div id="content"><!-- Begin #main --><div id="main"><div id="main2"><Blogger> <BlogDateHeader> <h2 class="date-header"><$BlogDateHeaderDate$></h2> </BlogDateHeader> <!-- Begin .post --> <div class="post"><a name="<$BlogItemNumber$>"></a> <BlogItemTitle> <h3 class="post-title"> <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl> <$BlogItemTitle$> <BlogItemUrl></a></BlogItemUrl> </h3> </BlogItemTitle> <div class="post-body"> <div> <$BlogItemBody$> </div> </div> <p class="post-footer"> <em>posted at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em> <MainOrArchivePage><BlogItemCommentsEnabled> <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled><BlogItemBacklinksEnabled></BlogItemBacklinksEnabled></MainOrArchivePage> <$BlogItemControl$> <hr></p> </div> <!-- End .post --> <!-- Begin #comments --> <ItemPage> <div id="comments"> <BlogItemCommentsEnabled><a name="comments"></a> <h4><$BlogItemCommentCount$> Comments:</h4> <dl id="comments-block"> <BlogItemComments> <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a> <$BlogCommentAuthor$> said... </dt> <dd class="comment-body"> <p><$BlogCommentBody$></p> </dd> <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a> <$BlogCommentDeleteIcon$> </dd> </BlogItemComments> </dl> <p class="comment-timestamp"> <$BlogItemCreate$> </p> </BlogItemCommentsEnabled> <BlogItemBacklinksEnabled> <a name="links"></a><h4>Links to this post:</h4> <dl id="comments-block"> <BlogItemBacklinks> <dt class="comment-title"> <$BlogBacklinkControl$> <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$> </dt> <dd class="comment-body"><$BlogBacklinkSnippet$> <br /> <span class="comment-poster"> <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em> </span> </dd> </BlogItemBacklinks> </dl> <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p> </BlogItemBacklinksEnabled> <p class="comment-timestamp"> <a href="<$BlogURL$>"><< Home</a> </p> </div></ItemPage> <!-- End #comments --></Blogger></div></div><!-- End #main --></div><!-- End #content --></div><div class="pos_abs3"><p>Column 2</p></div></body></html>
