WordPress.org

Ready to get started?Download WordPress

Forums

Sidebar and Content (Posts and Pages) Length (8 posts)

  1. nicely
    Member
    Posted 6 years ago #

    Hi,

    How do you make sure that the content area (posts and pages) and the sidebar always stay the same length, whichever one is longer? Thanks!

    I'm trying to accomplish this on http://fayettenamrecords.com/beta

    Adam

  2. Jo Hawke
    Member
    Posted 6 years ago #

    Hi, Adam.

    You need to place both the content area and the sidebar inside a container div with a border, and then you can give either of the columns a side border, as well, to maintain your design.

    I hope that helps.

    Jo

  3. jerardneal
    Member
    Posted 6 years ago #

    you can throw this script in your header file.

    <script language="javascript">
    
    matchHeight=function(){
      var divs,contDivs,maxHeight,divHeight,d;
    
      // set the class of the elements to match hieght
      var thisID = 'someID';
    
      // get all <div> elements in the document
      divs=document.getElementsByTagName('div');
      contDivs=[]; 
    
      // initialize maximum height value
      maxHeight=0; 
    
      // iterate over all <div> elements in the document
      for(var i=0;i<divs.length;i++){ 
    
           // make collection with <div> elements with class attribute assigned to 'thisID'
           if(thisID.test(divs[i].className)){ 
    
                 d=divs[i]; 
    
                 contDivs[contDivs.length]=d; 
    
                 // determine height for <div> element
                 if(d.offsetHeight){
                      divHeight=d.offsetHeight;
                 } 
    
                 else if(d.style.pixelHeight){
                      divHeight=d.style.pixelHeight;
                 } 
    
                 // calculate maximum height
                 maxHeight=Math.max(maxHeight,divHeight); 
    
           } 
    
      } 
    
      // assign maximum height value to all of container <div> elements
      for(var i=0;i<contDivs.length;i++){
           contDivs[i].style.height=maxHeight; 
    
      } 
    
    } 
    
    // execute function when page loads
    window.onload=function(){
      if(document.getElementsByTagName){
           matchHeight();
      }
    } 
    
    </script>

    give all your wrapper div the same class (use ID tag for css stuff, and the class tag for the script to use)

  4. nicely
    Member
    Posted 6 years ago #

    Yikes...

    viabledesign, I understand your method, but am a little unsure of how to do it. Would I write a container div into the index.php or page.php and then add a border to it in my styles.css?

    Adam

  5. nicely
    Member
    Posted 6 years ago #

    Thanks jerardneal. How do you give divs classes? Sorry, I'm that new to this...

  6. nicely
    Member
    Posted 6 years ago #

    Can anyone help to walk me through either of these approaches a little (or someone else suggested the height:100%; tag, but I haven't gotten that to work)? I'll provide my code... This site is almost finished except for this issue.

    I don't know how to make a container div or include other divs in a container, nor do I know how to assign classes to divs.

    This is probably so simple, but I'm a little lost...

  7. Jo Hawke
    Member
    Posted 6 years ago #

    Adam,

    I replied to you in the wrong thread, I believe. Sorry. I'd like to help, though, and ran across another option, using borders: http://www.alistapart.com/articles/multicolumnlayouts

    I think that would work well in this case. Contact me through my site (listed on my profile), and I'll see what else I can do to help you get that beta working.

    Jo

  8. jabecker
    Member
    Posted 6 years ago #

    Position Is Everything has an article on how to do this with source-ordered containers. My blog works on this principle. You can find their article here:

    http://www.positioniseverything.net/articles/sidepages/jello-piefecta-clean.html

Topic Closed

This topic has been closed to new replies.

About this Topic