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
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fluid Box with Borders that Adjust to content.

    So I've been trying to assemble a bunch of divs into a box that I can put content into

    The CSS I'm using is:
    <style type="text/css">
    #UL {
    float:left;
    height:25px;
    width:25px;
    }
    #UR {
    float:left;
    height:25px;
    width:25px;
    }
    #UP {
    background-image:url(UP.jpg);
    background-repeat:repeat-x;
    float:left;
    height:25px;
    width:100%;
    }
    #DL {
    float:left;
    height:25px;
    width:25px;
    }
    #DR {
    float:left;
    height:25px;
    width:25px;
    }
    #DN {
    background-image:url(DN.jpg);
    background-repeat:repeat-x;
    float:left;
    height:25px;
    width:100%;
    }
    #RT {
    background-image:url(RT.jpg);
    background-repeat:repeat-y;
    float:left;
    width:25px;
    height:100%;
    }
    #LF {
    background-image:url(LF.jpg);
    background-repeat:repeat-y;
    float:left;
    width:25px;
    height:100%;
    }
    #SDD_CONTENT {
    background-color:#000;
    height:100%;
    width:100%;
    float:left;
    overflow:visible;
    }
    #SDD_CONTAIN {
    height:600px;
    min-width:600px;
    float:left;
    overflow:visible;
    }
    #SDD_TOP {
    height:25px;
    width:600px;
    float:left;
    overflow:visible;
    clear:both;
    }
    #SDD_BOTTOM {
    height:25px;
    width:100%;
    float:left;
    overflow:visible;
    }
    #SDD_MIDDLE {
    height:100%;
    width:100%;
    float:left;
    overflow:visible;
    }
    </style>
    The structuring is:
    <!-- Contain -->
    <div id="SDD_CONTAIN">

    <!-- top -->
    <div id="SDD_TOP">
    <div id="UL"><img src="UL.jpg"></div>
    <div id="UP"></div>
    <div id="UR"><img src="UR.jpg"></div>

    </div>
    <!-- End Top -->

    <!-- Middle -->
    <div id="SDD_MIDDLE">

    <div id="LF"></div>
    <!-- Content -->
    <div id="SDD_CONTENT">Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente </div>
    <!-- End COntent -->
    <div id="RT"></div>

    </div>
    <!-- End Middle -->

    <!-- Bottom -->
    <div id="SDD_BOTTOM">

    <div id="DL"><img src="DL.jpg"></div>
    <div id="DN"></div>
    <div id"DR"><img src="DR.jpg"></div>

    </div>
    <!-- End Bottom -->

    </div>
    <!-- End Contain -->
    I can't manage to get things to stay where they need to be with out exact sizies. DO I need to apply some padding-left and padding-right into The #up, #dn and #sdd_content to get the objects left and righ of them to display inline.

    Also how do I get the #RT and #LF divs to actually expand to 100% of the vertical space within the #middle div?

    Should I make them in to classes with in the divs?

    ANy help would be greatly appreciated.

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    The following (which is based on http://www.webcredible.co.uk/user-fr...-borders.shtml) may be a simpler way of achieving the effect you want:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>Fluid Box</title>
    <style type="text/css">
    html, body { height: 100%; } /* required so inner elements can have a height to be 100% of */
    #UP { /* top edge */
    background:url(UP.jpg) 0 0 repeat-x; width: 100%;
    height: 100%;
    }
    #DN { /* bottom edge */
    background:url(DN.jpg) 0 100% repeat-x;
    height: 100%;
    }
    #LF { /* left edge */
    background:url(LF.jpg) 0 0 repeat-y;
    height: 100%;
    }
    #RT { /* right edge */
    background:url(RT.jpg) 100% 0 repeat-y;
    height: 100%;
    }
    #DL { /* bottom left */
    background:url(DL.jpg) 0 100% no-repeat;
    height: 100%;
    }
    #DR { /* bottom right */
    background:url(DR.jpg) 100% 100% no-repeat;
    height: 100%;
    }
    #UL { /* top left */
    background:url(UL.jpg) 0 0 no-repeat;
    height: 100%;
    }
    #UR { /* top right */
    background:url(UR.jpg) 100% 0 no-repeat; padding:30px;
    height: 100%;
    }
    #SDD_CONTENT {
    height:100%;
    width:100%;
    overflow:visible;
    }
    #SDD_CONTAIN {
    height:100%;
    background:black;
    color:white; /* always set contrasting colour to background */
    }
    </style>
    </head>
    <body>
    <!-- Contain -->
    <div id="SDD_CONTAIN">
    
    <div id="UP"><div id="DN"><div id="LF"><div id="RT"><div id="DL"><div id="DR"><div id="UL"><div id="UR">
    
    <!-- Content -->
    <div id="SDD_CONTENT">
    <h1>Fluid Box</h1>
    
    <p>
    Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente Contente 
    </p>
    </div>
    <!-- End COntent -->
    
    </div></div></div></div></div></div></div></div>
    
    </div>
    <!-- End Contain -->
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    When you play around with multiple DIV that is using div inside div's it is always better to specify the height and width to all the div's, to display set of div in line you can use display:inline css or span tags inside div's for some cases and use display:inline css.

    Regards
    Ameen


  •  

    Posting Permissions

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