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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Posts
    682
    Thanks
    24
    Thanked 1 Time in 1 Post

    Getting borders to go full length of content

    Hey guys.... I'm trying to make up a css table looking type thing with three different columns.... it's easy enough to get a border to go the full length of the content when you only have to columns as then you just use a border for the column with the longest content... but I have 3 columns & don't know which will be the longest.

    The borders only seem to stretch the length of the content.

    Here is an example row..

    Code:
                <div class="submission">
                    <div class="submissionTitle">
                        blah blah blah
                    </div>
                    <div class="submissionURL">
                        blah blah blah
                    </div>
                    <div class="submissionAction">
                        <input type="checkbox" name="blah" value="yes" />
                    </div>
                    <div class="contentClear"></div>
                </div>
    Here is the CSS:

    Code:
    .submission {
        margin: 0px auto;
        width: 860px;
        border: 1px solid #000;
        background-color: #B7916F;
        font-weight: bold;
        color: #fff;
    }
    
    .submissionTitle {
        float: left;
        width: 400px;
        margin-top: 3px;
        padding: 3px 0px;    
    }
    
    .submissionURL {
        float: left;
        width: 399px;
        margin-top: 3px;
        padding: 3px 0px;
        border-left: 1px solid #000;
    }
    
    .submissionAction {
        float: left;
        width: 59px;
        padding: 3px 0px;
        border-left: 1px solid #000;
    }
    Thank You!

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    can't be achieved easily

    generally the best solution is Faux Columns

    edit~ to elaborate - make an image that can be repeated suitably and apply it to the background of the container. the "border" will always be 100% of the containers height, giving the impression you want.
    this is dependant on having columns of a fixed width however.

  • #3
    Regular Coder
    Join Date
    Apr 2004
    Posts
    682
    Thanks
    24
    Thanked 1 Time in 1 Post
    Thanks...... I'll check it out!


  •  

    Posting Permissions

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