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

    Smile need help for a beginner

    hello!
    i have a problem:
    i want to change the height of my side bar as long as the text in the center of page long,
    it means when I have for ex 3 news in a page the side bar which have a background color must be increase to fit the long of text(3 news).

    i think it will do by javascript but i'm not sure!

    i my question isn't clear please tell me to explane more i really need it,

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    No javascript required, just some css. You can use "min-height" or don't specify a height at all. It will then stretch with what ever you fill it with.

  • Users who have thanked BulletTimeBill for this post:

    aida (04-01-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry can you explain some more,
    i was set the height auto,

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    This demo sets all the columns within the "container" div to the height of the tallest column in "container". You can add as many columns as you like inside "container" without having to touch the javascript.

    It's only a minor tweak to set a column height to the height of another column which looks like is what you want.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                ul {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    list-style-type: none}
                #container {
                    border: 1px solid red;
                    width: 800px;
                    overflow: hidden;
                    margin: 0px auto 0px auto;
                    padding: 20px 20px 20px 20px}
                /* sidebar's and content's padding values must be the same */
                #sidebar {
                    margin: 0px 0px 0px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid green;
                    float: left;
                    width: 250px}
                #content {
                    margin: 0px 0px 10px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid blue;
                    float: right;
                    width: 490px}
    
                #content div {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 70px 0px;
                }
            </style>
            <script type="text/javascript">
                window.onload=function() {
                    var maxHeight = 0;
                    //get the column containers
                    var colsA = document.getElementById("container").childNodes;
                    //get the height of the tallest column
                    for(var i=0; i < colsA.length; i=i+1) {
                        if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
                    }
                    //set all the column containers heights to maxHeight
                    for(var i=0; i < colsA.length; i=i+1) {
                        if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
                    }
                }
            </script>
        </head>
        <body>
            <div id="container">
                <div id="sidebar">
                    <ul id="menu_list">
                        <li>Menu item 1</li>
                        <li>Menu item 2</li>
                        <li>Menu item 3</li>
                        <li>Menu item 4</li>
                    </ul>
                </div>
                <div id="content">
                    <div>
                        Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                        Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                        pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                        ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                        aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
                        volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
                        ante sed, ac turpis dis dui vestibulum aut.
                    </div>
                </div>
            </div>
        </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks sooo much,
    thanks, thanks

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i was use your structure to solve my problem but, in fact i couldn't locate footer in the bottom
    because if i take any tag it will be the same height of the side bar


  •  

    Posting Permissions

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