SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A border to separate two columns of height-varying divs

    Hey everyone,

    Let's imagine we have two divs, floated to become columns:

    HTML Code:
    <div>col1</div>
    <div>col2</div>
    
    div{float: left; width: 200px;}
    At any time, any of the two divs may have a greater height than the other (dependent on content on a page). How can I create a border to separate the two columns completely, regardless of their height?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What do you mean separate? Like push them away from each other?

    If you, somehow, meant equal height columns (you mentioned nothing of this but with what you offered to the table I assume it's this) , try adapting this

    Separating = setting a margin. So unless it was that simple you need to either paint us the picture or describe it better.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I'm looking for Ryan. Thanks!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If you don't need equal column colours but just an equal divider between 2 columns then the easier way is to apply a border-right to the left column and a border-left to the right column and then drag the right column back by 1px so that the borders sit on top of each other and thus will always stretch to the bottom.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
    	padding:0 10px;
    	margin:0 0 1em
    }
    h1, h2 {
    	clear:both;
    	border-bottom:1px solid red
    }
    .outer {
    	width:402px;
    	border:1px solid #000;
    	clear:both;
    	overflow:hidden;
    	margin:0 auto 20px;
    }
    .float {
    	float:left;
    	width:200px;
    	border-right:1px solid #000;
    }
    .f2 {
    	border:none;
    	border-left:1px solid #000;
    	margin-left:-1px;
    }
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<div class="float">
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    		</div>
    		<div class="float f2">
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    		</div>
    </div>
    <div class="outer">
    		<div class="float">
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    		</div>
    		<div class="float f2">
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    				<p>Test</p>
    		</div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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