CODEWITHSUNDEEP
phphtmlcsswordpress
Pey
Pey

Reputation: 33

How to I make my the height of my sidebar and main content consistent?

Currently I'm using wordpress for my website. The height of my sidebar and main content area doesn't align. How to I make the height of my sidebar and the main content consistent? Example pageA has longer content but the sidebar is shorter, so the unused sidebar area will fill up with blank white space.

Below is my index.php code.

<?php get_header(); ?>
  <div id="table">
      <div id="mainsidebar">
          <?php get_sidebar(); ?>
      </div>
      <div id="maincontent">
          <div valign="top">
            <?php wowslider(9); ?>
          </div>
          <div valign="bottom">
            <?php include('main-content.php'); ?>
          </div>
      </div>
  </div>
<?php get_footer(); ?>
</body>

Here the sample image link that I've uploaded.

http://imgur.com/uy6bOK2

Thanks.

Upvotes: 2

Views: 839

Answers (5)

Taras Kumpanenko
Taras Kumpanenko

Reputation: 96

You don`t need to make it the same height. Set table background "white" and it will look like both have the same height

#table {background: #fff;}

Upvotes: 0

xdividr
xdividr

Reputation: 21

As posted here, you can do this with CSS:

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

HTML:

<div class="container">
    <div class="column">Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>Some content!
        <br/>
    </div>
    <div class="column">Something</div>
</div>

Or try the following:

From: Two floating divs side by side, same height

HTML:

<div id="table">
    <div id="mainsidebar">
        <p>Main Sidebar Content</p>
    </div>
    <div id="maincontent">
        <p>Main Content</p>
    </div>
</div>​

CSS:

#table { position: relative; }

#mainsidebar { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
}
#maincontent { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
}​

Upvotes: 0

Vishnu R
Vishnu R

Reputation: 1869

Put <div id="mainsidebar"></div> and <div id="maincontent"></div> in another div. Make that div as same height of maincontent div. and give height:100% for mainsidebar div.

Idea from here.

Upvotes: 0

Raphael Caixeta
Raphael Caixeta

Reputation: 7846

I use equalize.js for this. Super simple to setup and works fantastically!

Upvotes: 0

Ryan Potter
Ryan Potter

Reputation: 835

If you don't mind using javascript:

$(function(){
    var main = $('#maincontent').height(),
        sidebar = $('#mainsidebar').height();
    if(main > sidebar){
        $('#mainsidebar').css({'min-height':main});
    }
});

Upvotes: 1

Related Questions