locked
two layers side by side separated by a decorative line RRS feed

  • Question

  • In order to put two layers side by side I use the following styles:

    #contnrDiv {
      width: 100%;
      clear: both;
    }

    #leftDiv {
      width: 22%;
      float: left;
    }

    #rightDiv {
      width: 78%;
      float: left;
    }

    And then in the body:

    <div id="contnrDiv">
      <div id="leftDiv">Here are the contents of the left DIV</div>
      <div id="rightDiv">and here the contents of the right DIV</div>
    </div>

    Well, I thought I could add a decorative line between them, so I added the following attribute to the leftDiv style:
    border-right: 1px #996633 solid;

    However this is not what I exactly want, because the border expands toward to the bottom of the page as the amount of text grows in that layer. I want the line expanding, based on the layer with the most ammount of text (the tallest DIV). I know that it can be done using a two columns table, however this not an option because of the general design of the page.

    So, is there a workaround?

    • Edited by geotso Tuesday, April 12, 2011 1:59 PM
    Tuesday, April 12, 2011 1:55 PM

Answers

  • Put a right border on the left-hand div as you have done, put the same border on the right-hand div, but on the left side, and overlap the divs by the width of the border by putting a negative margin-left on the right-hand div.

    Reduce the width of #rightDiv as needed.  77% seems to work for your 1px border and the coresponding 1px negative margin-left.

    It will look like one line, and it will go down to the height of the longest div.


    • Marked as answer by geotso Wednesday, April 13, 2011 1:23 PM
    Tuesday, April 12, 2011 2:36 PM

All replies

  • First, a terminology issue - you aren't using layers whis is the common name for absolutely positioned divs.

    Second, the simplest method to create a dividing line is to use a background image with the line in it. In the example you gave it would be on the "contnrDiv" is where you would put it.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Tuesday, April 12, 2011 2:25 PM
  • Put a right border on the left-hand div as you have done, put the same border on the right-hand div, but on the left side, and overlap the divs by the width of the border by putting a negative margin-left on the right-hand div.

    Reduce the width of #rightDiv as needed.  77% seems to work for your 1px border and the coresponding 1px negative margin-left.

    It will look like one line, and it will go down to the height of the longest div.


    • Marked as answer by geotso Wednesday, April 13, 2011 1:23 PM
    Tuesday, April 12, 2011 2:36 PM
  • First, a terminology issue - you aren't using layers whis is the common name for absolutely positioned divs.

     I didn't know the difference. Thanks.

    Second, the simplest method to create a dividing line is to use a background image with the line in it. In the example you gave it would be on the "contnrDiv" is where you would put it.

     If I get it right, it seems like:

    #contnrDiv {
      width: 100%;
      clear: both;
      background-image ('../theLineImagePath');
      background-position: 22% 0;
      background-repeat: repeat-y;
    }

    Thanks

    Tuesday, April 12, 2011 4:09 PM
  • #contnrDiv {
      width: 100%;
      clear: both;
      background-image ('../theLineImagePath');
      background-position: 22% 0;
      background-repeat: repeat-y;
    }

    Unfortunately, testing the above schema, I can see the image line in EW, but not in the browsers (IE, FF, Chrome)...
    Tuesday, April 12, 2011 5:52 PM
  • geotso,

    Did you try my suggestion?  No image required.

    Tuesday, April 12, 2011 5:54 PM
  • Kathy,

    not yet... It took me hours to find out why I can't see the image...

    On the other hand, your suggestion involves related units (%) with fixed ones (px), and I think this is not a good idea. (I have no documentation on this. Just my opinion).

    If you insist(!) I'll give it a try later... (It's dinner time here!)

    Tuesday, April 12, 2011 6:37 PM
  • You already use both in the markup you provided to start with, and I just continued where you started.  The margin I added needs to match the border width, which is in px, and it will work just fine.
    Tuesday, April 12, 2011 7:25 PM
  • Sounds like the image is being covered up by one div or the other. You'd need to to have the line outside of the image the same width as the first div. I'm not a big fan of the sort of fluid layout you are using and tend to make the smaller column a fixed width.


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Tuesday, April 12, 2011 8:07 PM