1 reply [Last post]
GarryJones61
GarryJones61's picture
Offline
newbie
Last seen: 6 years 9 weeks ago
Timezone: GMT+2
Joined: 2013-09-14
Posts: 1
Points: 2

I have two DIVs side by side enclosed with header and footer DIVs. I want a border between the two DIVS that stretches between the header and footer DIVs.

When I set the right hand DIV to have a left border it works only if the right hand DIV has a greater height. (The height is dynamic according to how much text is placed there. I do not want to move the border on a daily basis as the amount of text changes).

Two examples
http://www.cykeltours.se/test_border1/
Correct: The border goes all the way down. (Because the right hand DIV has a greater height than the left one).

http://www.cykeltours.se/test_border2/
Incorrect. The border stops at the bottom of the right-hand DIV. (Because the right hand DIV has a smaller height than the left one).

I know "why" the border does this, it's because it only runs to the end of text. But surely there is a workaround for this?

Any help greatly appreciated

Garry Jones
Sweden
Code for Example Number 1

<!DOCTYPE html>
<html>
<head>
<style>
div.aaa
{
width:1060px;
margin:0px;
}
div.bbb
{
padding:2px;
color:white;
background-color:blue;
clear:left;
}
div.fff
{
padding:2px;
color:yellow;
background-color:blue;
clear:left;
}
 
div.ccc
{
float:left;
width:160px;
margin:0;
padding:5px;
}
div.ddd
{
margin-left:190px;
border-left:1px solid gray;
padding:5px;
}
</style>
</head>
<body style="margin:0px">
 
<div class="aaa">
<div class="bbb">Top</div>
<div class="ccc">This is some text in the left hand side.</div>
<div class="ddd">
This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. This is some text on the right. The border only runs to the left of this and does not leak down to bottom. </div>
 
<div class="fff">Bottom</div>
 
</div>
 
</body>
</html>

Code for example number two is the same except there is more text in the "div class = c" tag which pushes the left hand div down below the border of the right hand div.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 12 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Wrap the two columns in a

Wrap the two columns in a container div. Make an image 1x10px of solid gray, and use it as the background for the wrapping div.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test Doc</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: 100%/1.5 sans-serif;
    margin: 0;
    }
 
  p {
    font-size: 1em;
    }
 
  #wrapper {
    border: 1px solid black;
    margin: 0 auto;
    max-width: 75em;
    min-width: 30em;
    }
 
  #content {
    background: url(bg-vert-line.gif) 190px 0 repeat-y;
    border: 1px solid black; /*for clarity*/
    overflow: hidden;  /*causes element to enclose its floats*/
    }
 
  #ccc {
    float: left;
    padding: 5px;
    width: 160px;
    }
 
  #ddd {
    margin-left: 190px;
    padding: 5px;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="wrapper">
    <h1>Top level page heading</h1>
 
    <div id="content">
      <div id="ccc">
        <h2>Top level sub-heading for this section</h2>
 
        <p>Etiam non rhoncus neque. Suspendisse et dignissim nulla, ut eleifend
        odio. Lorem ipsum dolor sit.</p>
      </div>
 
      <div id="ddd">
        <h2>Top level sub-heading for this section</h2>
 
        <h3>Topic heading</h3>
 
        <p>Etiam non rhoncus neque. Suspendisse et dignissim nulla, ut eleifend
        odio. Lorem ipsum dolor sit.</p>
 
        <h3>Topic heading</h3>
 
        <p>Etiam non rhoncus neque. Suspendisse et dignissim nulla, ut eleifend
        odio. Lorem ipsum dolor sit.</p>
      </div>
 
    </div>
 
    <p id="footer">footer stuff</p>
  </div>
</body>
</html>

Note image attached. I used ImageMagick to make it, using a one line command in the terminal: convert -size 1x10 xc:gray bg-vert-line.gif

cheers,

gary

AttachmentSize
bg-vert-line.gif 91 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.