SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member splitPersonality's Avatar
    Join Date
    Aug 2004
    Location
    Salem
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping borders for side by side divs

    I know I have seen overlapping borders done before, but I can't remember how. I have an internal web based application for our users. For internal apps we support only IE 6. I have two div classes, menu and content. An excerpt from the stylesheet is:
    div.content {
    padding: 0.75em;
    margin: 0em;
    text-align: left;
    float: right;
    width: 80%;
    min-height: 500px;
    border-left : thin groove Navy;
    }

    div.menu {
    float: left;
    margin: 0em;
    width: 20%;
    padding: 0.75em;
    text-align: left;
    border-right : thin groove Navy;
    }

    Because the content is dynamic I won't necessarily know which div will have the greater height. I need a border between the two divs that is the same height as the tallest div. I thought the easiest way was to have overlapping borders, so two borders would appear as one, but can't get it to work.

    Any suggestions?

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure about this, but how about set one to "margin-left: -1px;" or margin-right, depends on the position.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Negative margins are the way to go as possibility mentioned but you need to take into account padding and borders stretching the element past the 100% mark.

    I've taken the padding out and used a negative margin to accomodate the extra width of the borders and also a negative margin to make the overlap. (And i reduced one element by a fraction of a percent to avoid ie's rounding bug. You can adding padding back on an inner element if you need to)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    div.content {
    margin: 0em;
    text-align: left;
    float: left;
    width: 79.9%;
    min-height: 500px;
    border-left : 2px groove Navy;
    margin-right:-4px;
    margin-left:-2px;
    }
    * html div.content {height:500px}
    div.menu {
    float: left;
    margin: 0em;
    width: 20%;
    text-align: left;
    border-right : 2px groove Navy;
    }
    </style>
    </head>
    <body>
    <div class="menu">Menu</div>
    <div class="content">Content</div>
    </body>
    </html>
    Hope that helps.

    Paul

  4. #4
    SitePoint Member splitPersonality's Avatar
    Join Date
    Aug 2004
    Location
    Salem
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm!

    All of the personalities thank you

  5. #5
    SitePoint Guru D-flyer's Avatar
    Join Date
    Jan 2001
    Location
    Near a computer
    Posts
    782
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,

    I have got a similar problem. I am trying to bulild a website out of boxes(just small tables), now these are my templates.

    then I reffer each table to this CSS
    Code:
     .borderTBLR {
     	border: 1px solid #999999;
     }
    Now I see the borders overlapping eachother and the border seems to be 2px instead of 1px.

    I have tried
    Code:
      .borderTBLR {
      	border: 1px solid #999999;
     margin: -1px;
      }
    Any other suggestion?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    Not quite sure what you mean but if you have the elements underneath each other then the top and bottom borders will be next to each other and will give you 2px borders. Just set the class to have border-bottom:none and then add a class to the last one in sequence and apply a border to it.

    Not sure if that's what you mean so a working example may be required

    (Sorry for the late reply but I've been away on holiday)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •