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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Border width issue.

    I am using a 3 border design around an image. Basically made a wooden frame using CSS to place images within. The frame dynamically changes height depending on the size of the image but the problem is all 3 borders automaticallly fills 100% of the width of the screen. My end goal is to have this entire object fixed in the dead center of a absolute width page.

    What I need to figure out is how to have the width of the borders collapse in to the current width of image within the content section.

    Here's the css (Nothing in short hand cause I'm trying to find the problem and im still new to this!)

    (CSS)
    #oborder {

    margin-top: 30px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    Padding-left: 20px;
    padding-right: 20px;
    background-image: url(../img/oak.jpg);
    border-color: brown;
    border-width: 2px;
    border-style: solid;
    }



    #iborder {

    background-image: url(../img/oak.jpg);
    border-color: brown;
    border-width: 1px;
    border-style: solid;
    }


    #content {

    border-color: brown;
    border-style: solid;
    border-width: 2px;
    padding: 1px;
    margin: 3px;
    }

    (HTML)
    <div id="oborder">
    <div id="iborder">
    <div id="content">
    <img src="img/test.JPG"></img>

    </div>
    </div>
    </div>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    I'll play around with it and get back to you.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    There's <div style="display: table-cell;"></div> which makes the div act like a table-cell in that you can use vertical positioning (vertical-align) and the div expands to fit the content with a default width of zero. Unfortunately Internet Explorer 6 and 7 don't support this CSS property.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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