CSS Layout Borders

1 reply [Last post]

Sat, 2013-09-14 20:42

GarryJones61

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.

Tags:

Sat, 2013-09-14 22:07

gary.turner

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

Attachment	Size
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.

Wrap the two columns in a

User login

Navigation