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

Question

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.

Thanks.

Answer can be found in this post : http://stackoverflow.com/questions/10988381/equal-height-divs-two-column/15584074#15584074 — Shabbir Lakdawala, Mar 26 '13 at 06:11

score 1 · Answer 1 · answered Mar 26 '13 at 04:30

1

If you don't mind using javascript:

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

answered Mar 26 '13 at 04:30

Ryan Potter

835
1
11
25

@Pey, I know this is a late reply but I found this useful for a project I'm currently working on where a CSS solution was not possible. This would need to go into an external .js file and linked in the footer of your site, or wrap it in `` tags and place in the footer – Mr Jonny Wood Jan 23 '14 at 12:24

score 0 · Answer 2 · answered Mar 26 '13 at 04:32

0

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

answered Mar 26 '13 at 04:32

Raphael Caixeta

7,808
9
51
76

score 0 · Answer 3 · answered Mar 26 '13 at 04:35

0

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.

answered Mar 26 '13 at 04:35

Vishnu R

1,859
3
26
45

score 0 · Answer 4 · edited May 23 '17 at 11:52

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%;
}

score 0 · Answer 5 · answered Apr 28 '16 at 11:30

0

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;}

answered Apr 28 '16 at 11:30

Taras Kumpanenko

98
1
11

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

5 Answers5