WEB CSS question... simple?

Discussion in 'OT Technology' started by hurleyint1386, Sep 7, 2007.

  1. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    I bet this is really simple, but I can't figure it out. I've got a site, which has a left_panel, right_panel, and a main where the contents goes. I want the height of the panels to be the same as the main panel. This is just a guess, but would I make a container for all three of them, then set the height? Or is there another way?
     
  2. MrBrotato

    MrBrotato New Member

    Joined:
    Sep 7, 2005
    Messages:
    5,558
    Likes Received:
    0
    It is definitely not really simple. I have avoided trying to do this. You could fake your columns. If you have a line or a color, just set that as the background across a container div and repeat it down so the columns all appear to continue down when actually only the tallest does.

    Or?
    http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

    Can't help much, I have never tried, or have given up.
     
    Last edited: Sep 7, 2007
  3. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    damn, didnt think it was as difficult as i was making it out to be
     
  4. jjones

    jjones New Member

    Joined:
    Sep 4, 2007
    Messages:
    24
    Likes Received:
    0
  5. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    #leftpanel {
    width: 150px;
    height: 400px;
    float: left;
    }

    #content {
    width: 500px;
    height: 400px;
    float: left;
    }

    #rightpanel {
    width: 150px;
    height: 400px;
    float: right;
    }

    if im understanding what you are asking correctly, that should work.
     
  6. MrBrotato

    MrBrotato New Member

    Joined:
    Sep 7, 2005
    Messages:
    5,558
    Likes Received:
    0
    But you have to manually adjust the height...
     
  7. grimstone

    grimstone magic murda bag OT Supporter

    Joined:
    Sep 28, 2004
    Messages:
    4,073
    Likes Received:
    0
    Location:
    atx
    Code:
     <script type="text/javascript">
        
    //    
    //    
    //    /* <![CDATA[ */ 
    //        function AdjustColumnsHeight()
    //        {
    //            // get a reference to the three DIVS that make up the columns
    //            var centerCol = window.document.getElementById('centercolumn');
    //            var leftCol = window.document.getElementById('leftcolumn');
    //            var rightCol = window.document.getElementById('rightcolumn');
    //            // calculate the max height
    //            var hCenterCol = centerCol.offsetHeight;
    //            var hLeftCol = leftCol.offsetHeight;
    //            var hRightCol = rightCol.offsetHeight;
    //            var maxHeight = Math.max(hCenterCol, Math.max(hLeftCol, hRightCol));
    //            
    //            // set the height of all 3 DIVS to the max height
    //            centerCol.style.height = maxHeight + 'px';
    //            leftCol.style.height = maxHeight + 'px';
    //            rightCol.style.height = maxHeight + 'px';            
    //            // Show the footer
    //            //window.document.getElementById('footer').style.visibility = 'inherit';
    //        }
    //        window.onload = function() { AdjustColumnsHeight(); } 
    //       
    //    /* ]]> */       
    //    
    
    
    
    
        
        </script>
    
    try something like this
     
  8. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    i need something to resize according the the amount of content in the content section. although it seems like css should be able to do it. i dont know why i would need to use javascript.
     
  9. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    so you want 'fluid' height that will match the content?
    hmm...

    thats a tough one.
     
  10. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    really? or are you being sarcastic? sorry, i can't tell online. but yes that's what I'm looking for. or should i just make the site a fixed dimension? i'm not very good at design, so i don't know what to do
     
  11. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    no im being serious. wordpress does something like you are asking. not sure how it incorporates it. id have to look at the code a little more.
     
  12. MrBrotato

    MrBrotato New Member

    Joined:
    Sep 7, 2005
    Messages:
    5,558
    Likes Received:
    0
    If it was me, I'd just use a table. It works.
     
  13. Deleted User

    Deleted User Guest

  14. Dolan

    Dolan OT Supporter

    Joined:
    Aug 6, 2007
    Messages:
    3,095
    Likes Received:
    0
    Location:
    United States

    QFT... I know they're out-of-date, but seriously. In some cases, a table is so much easier.
     
  15. auveeb

    auveeb DATS CUTE

    Joined:
    Mar 22, 2005
    Messages:
    11,467
    Likes Received:
    0
    Location:
    New York City, NY
    They suck, and are intended for tabular data, not templates.
     
  16. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    I think I found something, Yaml. I'll try it out and see if it works
     
    Last edited: Sep 9, 2007
  17. you should be setting the height of each panel individually. a container/wrapper is usually used to just organize all of your divs and make moving them around easier for you.

    edit: oh did you want each panel to be fluid? fluid with the size of the browser?
     
  18. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    fluid with the size of the content div. so when content is added and the div gets taller, the sidebars should match it.
     

Share This Page