Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How can I make this border extend?

    Hi,

    Does it have to do with clearing? I would like the border between the left and right panes to autosize to the pane that is taller...

    Code:
    .main
      {
        height: 500px;
        background: #ffffff;
        color: #000000;
      }
    
    .leftpane
      {
        float: left;
        width:610px;
        border-right: 5px solid #000;
        padding: 20px;
        padding-top: 0px;
      }
    
    .rightpane
      {
        float: left;
        width:280px;
        padding: 20px;
        padding-top: 0px;
      }
    Thanks,

    Alan
    Attached Thumbnails Attached Thumbnails How can I make this border extend?-panes.png  

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You can make height:100% of both the panes....


    Cheers

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    For that, you'd need to use a faux column technique.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks guys - I will try that.

    One other question - if I remove the height: 500px; from the .main (it was there for testing), I noticed that the leftpane and rightpane lose their white background. Shouldn't these inherit the background from .main?

    Code:
          <div class="main">
            <div class="leftpane">
              content
            </div>
          </div>
    Thanks,

    Alan

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Shouldn't these inherit the background from .main?
    It's because of the floats applied to the inner elements. You need to clear it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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