Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 column fluid layout border issues

    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

    source is as follows:
    Code:
    <!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:
    Code:
    /* 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;
    }

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    why dont you just add this the the left hand column?

    Code:
    border-right:1px solid #000;

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    it will follow, just add content and watch it go

    Code:
    <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>

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ahh. i should learn to practice instead of assume. heh

    Thanks alot.

    PS: is there a 'issue solved' button?

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.


  •  

    Posting Permissions

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