theashman
07-11-2008, 09:53 PM
Hi. I have a 2 column fluid layout and what may happen is that the content in either column could be longer. i want to use a border to differentiate the columns for my users.
what i want is the border between the columns to extend all the way to the bottom of the longest column. to try and achieve this i am using border-left on my right hand column div. The only problem is that if there isnt much content in that div and the content in the left column exceeds the right column the border doesn't extend all the way to the bottom.
my example can be seen here:
HERE (http://test.ls12style.co.uk/forumlayout.html)
source is as follows:
<!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" />
<link rel="stylesheet" type="text/css" href="random.css" />
<title>Untitled Document</title>
</head>
<body>
<div id="content">
<h3>Forum post</h3>
<a href="/"><img src="images/forum/topic.gif" alt="New Topic" border="0" /></a> <a href="/"><img src="images/forum/reply.gif" alt="Reply" border="0" /></a>
<div class="forumcont">
<div class="forumheader">
<div class="forumheadauth">Author</div>
<div class="forumheadmess">Message</div>
</div>
<div class="forummess">
<div class="forummessauth">This is where the name of the author will be displayed and also their avatar if they have one and maybe some statistics.</div>
<div class="forummessmess">This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message.</div>
<div style="clear:both"></div>
</div>
<div class="forumfooter">
<div class="forumfootdate">This is where the date of the post is going to be.</div>
<div class="forumfootbtns"><a href="?"><img src="images/forum/delete.gif" alt="Delete Post" border="0" /></a> <a href="/"><img src="images/forum/edit.gif" alt="Edit Post" border="0" /></a> <a href="/"><img src="images/forum/report.gif" alt="Report Post" border="0" /></a></div>
<div style="clear:both"></div>
</div>
</div>
<a href="/"><img src="images/forum/topic.gif" alt="New Topic" border="0" /></a> <a href="/"><img src="images/forum/reply.gif" alt="Reply" border="0" /></a><br />
</div>
</body>
</html>
CSS is as follows:
/* Forum positioning */
.forumcont {
border:1px solid #000000;
}
.forumheader {
border-bottom:1px solid #000000;
}
.forumheadauth {
width:150px;
float:left;
text-align:center;
}
.forumheadmess {
margin-left:150px;
text-align:center;
border-left:1px solid #000000;
}
.forummess {
}
.forummessauth {
text-align:center;
width:150px;
float:left;
}
.forummessmess {
margin-left:150px;
border-left:1px solid #000000;
padding:5px;
height:100%;
}
.forumfooter {
border-top:1px solid #000000;
}
.forumfootdate {
width:150px;
float:left;
}
.forumfootbtns {
border-left:1px solid #000000;
margin-left:150px;
line-height:20px;
height:100%;
padding:2px;
}
what i want is the border between the columns to extend all the way to the bottom of the longest column. to try and achieve this i am using border-left on my right hand column div. The only problem is that if there isnt much content in that div and the content in the left column exceeds the right column the border doesn't extend all the way to the bottom.
my example can be seen here:
HERE (http://test.ls12style.co.uk/forumlayout.html)
source is as follows:
<!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" />
<link rel="stylesheet" type="text/css" href="random.css" />
<title>Untitled Document</title>
</head>
<body>
<div id="content">
<h3>Forum post</h3>
<a href="/"><img src="images/forum/topic.gif" alt="New Topic" border="0" /></a> <a href="/"><img src="images/forum/reply.gif" alt="Reply" border="0" /></a>
<div class="forumcont">
<div class="forumheader">
<div class="forumheadauth">Author</div>
<div class="forumheadmess">Message</div>
</div>
<div class="forummess">
<div class="forummessauth">This is where the name of the author will be displayed and also their avatar if they have one and maybe some statistics.</div>
<div class="forummessmess">This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message. This is a message.</div>
<div style="clear:both"></div>
</div>
<div class="forumfooter">
<div class="forumfootdate">This is where the date of the post is going to be.</div>
<div class="forumfootbtns"><a href="?"><img src="images/forum/delete.gif" alt="Delete Post" border="0" /></a> <a href="/"><img src="images/forum/edit.gif" alt="Edit Post" border="0" /></a> <a href="/"><img src="images/forum/report.gif" alt="Report Post" border="0" /></a></div>
<div style="clear:both"></div>
</div>
</div>
<a href="/"><img src="images/forum/topic.gif" alt="New Topic" border="0" /></a> <a href="/"><img src="images/forum/reply.gif" alt="Reply" border="0" /></a><br />
</div>
</body>
</html>
CSS is as follows:
/* Forum positioning */
.forumcont {
border:1px solid #000000;
}
.forumheader {
border-bottom:1px solid #000000;
}
.forumheadauth {
width:150px;
float:left;
text-align:center;
}
.forumheadmess {
margin-left:150px;
text-align:center;
border-left:1px solid #000000;
}
.forummess {
}
.forummessauth {
text-align:center;
width:150px;
float:left;
}
.forummessmess {
margin-left:150px;
border-left:1px solid #000000;
padding:5px;
height:100%;
}
.forumfooter {
border-top:1px solid #000000;
}
.forumfootdate {
width:150px;
float:left;
}
.forumfootbtns {
border-left:1px solid #000000;
margin-left:150px;
line-height:20px;
height:100%;
padding:2px;
}