A border to separate two columns of height-varying divs

HTML & CSS
1

Hey everyone,

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


<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

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.

3

This is what I’m looking for Ryan. Thanks! :slight_smile:

4

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.


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