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,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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
    •