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 Coder
    Join Date
    Jun 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile moving to css layout ... having a problem..

    hi guy,
    ok here goes. im doing my first website using all css layout. i am at the stage where i am just trying to layout the page (no content) using divs and css. its going ok.... float left here.... float right there. but now i having a problem! in my main content container i want a graphic (about 20 px wide) to run down along the right hand side. so as the content gets longer it will streach with it. this is easy to do with tables. just set the background image of the right most columns to whatever you want but with divs its different. ive created a div within my container and placed it to the right .. and even set its background.... but how to i make it match the length of the main container ?? do i do this with javascript ?

    here my html and css....... so basically i want my div with id rightshadow to streach with main_container or rightmostbox

    i hope this is clear....? im just trying to get a graphic running down the side of my page i guess im still thinking in table mode.... ? thanks to anyone who can help (: ,) Kat~


    <div align="center" id="main_container">
    <div align="left" id="leftmostbox">
    </div>
    <div align="left" id="rightshadow">
    </div>
    <div align="left" id="rightmostbox">
    </div>
    </div>




    #leftmostbox {
    float: left;
    padding: 5px;
    margin: 5px;
    background: #666;
    border: 1px solid RED;
    /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 200px;
    }
    html>body #leftmostbox {
    width: 200px;
    /* ie5win fudge ends */
    }


    #rightmostbox {
    float: right;
    padding: 5px;
    margin: 5px;
    background: #666;
    border: 1px solid RED;
    width: 450px;
    /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    }
    html>body #rightmostbox {
    width: 520px;
    /* ie5win fudge ends */
    }


    #rightshadow {
    float: right;
    background: GREY;
    border: 1px solid BLACK;
    width: 20px;
    /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 20px;
    }

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Location
    Lawrence, Kansas
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I know what you're needing. Do you have the site up somewhere we we can take a look at it?

    Eric
    Last edited by grubesteak; 05-29-2005 at 05:43 PM.

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So as your middle content is stretching downwards, you want a random graphic (in RIGHTMOSTBOX) to stretch with it at the same time?

    Can you give a visual example?

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey guys .... ive attached an image.... its a wireframe mockup of my main page. you'll see the long thin box(side graphic) on the right runs along side my main content. its background will be a small graphic that will tile all the way down.

    ive coded all these boxes using divs. "main content" and "side graphic" are both divs floated inside a container div. i want "side graphic" to match whatever size "main content" is.

    im thinking im terms of "main content" being the left column of a table and "side graphic" being the right column (i.e it would streach automatically). how do i emulate this effect ? or how would a pro do it ? thanks a bunch guys... kattie..
    Attached Thumbnails Attached Thumbnails moving to css layout ... having a problem..-wireframe-index.jpg  


  •  

    Posting Permissions

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