Question

After the header I have one div which contains two others, which are next to each other. I want to create a border between them. I’ve tried to use the right border of the left div or the left border of the right div, but they don’t work right.

The right div can have much content, so I have to do overflow: hidden for it, so I can scroll the page. But if I have only little content, the div will not fill the entire page vertically, so the left border will be to small. Here -> http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html you can see what I’m talking about.

When the right div increases vertically, I want the border to go to the bottom, to follow it’s size.

HTML:

<div id="wrapper">
        <div id="leftsidebar">
            <form id="logoutForm" action="index.html">
                <h1 id="login_title">Logout</h1>
                <fieldset id="actions">
                    <input id="logout" type="submit" value="Log out" />
                </fieldset>
            </form>
        </div>
        <div id="main">
            <span id="location">Home</span>
            <a href="member_news.html" class="normal_link">News</a>
        </div>
    </div>

CSS:

div#wrapper{
  position:absolute;
  top:25%;
  width:100%;
}

div#leftsidebar{
  /*position:absolute;
  top:25%;*/
  width:19.87%;
  height:100%;
  min-width:200px;
  float:left;
}

div#main{
  /*position:absolute;
  top:25%;
  left:20%;*/
  /*width:79.81%;
  float: left;*/
  font-size:1.2em;
  border-left-color:white;
  border-left-style:solid;
  border-left-width:3px;
  overflow:hidden;
  padding-bottom:2%;
}

How can I obtain what I want?

Answer 1

Give the wrapper and the main div the right height and you’ll get the result.

div#wrapper{
    position:absolute; /*Stayed this whay cause you needed it*/
    top:25%;
    height: 75%; /**Make the wrapper contain all the needed space*/
    width:100%; 
}
div#main{
   height:96%; 
   /**Value actually needs be a bit less then 100 due to padding*/
   .... /**You're code here*/
}​

You can see the result in action on the following jsFiddle.
http://jsfiddle.net/pY6nF/