Divide an empty/half-full page into two columns

Get Started
1

Say I want to have a page divided into two columns, which I’m going to make as divs:


<html>
<head><style type="text/css">

#left {
width: 70%;
float: left;
background: red; }  <--- relevant

#right {
width: 30%;
float: right;
border-left: 2px solid #blue; }  <--- relevant

</style></head>


<body>

<div id="left"></div>
<div id="right"></div>

<body>
</html>

I want a border of say 2px running between the two divs from top to bottom. Assume there is no content. I want to add border-left: 2px solid #red; to make this border — but it only attaches itself to content. How do I get a border when there is nothing (or just a few lines) there? Likewise the background colour in the example doesn’t show up unless there’s content. Am I misusing divs?

2

you could use the min-height css value, go tohttp://www.dustindiaz.com/min-height-fast-hack/

3

30% + 70% + 2px>100%, so the right div will go down