...

View Full Version : 2 column fluid layout border issues



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;
}

jcdevelopment
07-11-2008, 09:58 PM
why dont you just add this the the left hand column?



border-right:1px solid #000;

theashman
07-11-2008, 10:09 PM
because that would make total border width 2px.
if i swap that for having the border-left what happens if the content of the right column exceeds the content of the left column?

jerry62704
07-11-2008, 10:16 PM
Could you position either one 1px over so the borders would be on top of each other? Then it wouldn't be 2px and there would always be a line as long as the longest one.

The alternative is to use a faux column. Sorry, I don't have a link, but if you search here you will find references.

jcdevelopment
07-11-2008, 10:19 PM
it will follow, just add content and watch it go



<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.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.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.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.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.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.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.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.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.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.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>

theashman
07-11-2008, 10:23 PM
ahh. i should learn to practice instead of assume. heh

Thanks alot.

PS: is there a 'issue solved' button?

jcdevelopment
07-11-2008, 10:27 PM
no, just a thank user or you can type resolved on the front, where all threads are listed.

Just double click yours and type resolved next to it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum