I am tring to make two columns having same height but failed. How to change my CSS or using Jquery? No table please. I have a gridview to display table from database.

My code:

<div id="wrap">
    <div id="header">
          <h1>TEST</h1>
    </div>
    <div id="sidebar">
        <ul>
                <li>nav1</li>
                <li>nav2</li>
                <li>nav3</li>
                <li>nav4</li>
        </ul>
    </div>
    <div id="gridview">

        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
</div> 

CSS:

 #wrap
 {
     width: 800px;
     background-color: #99c;
     overflow: hidden;
 }

 #header
 {
    border-style: solid;
    border-width: 1px;
    background-color: #ddd;
    width: 800px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #sidebar
  {
    float: left;
    width: 125px;
    padding-top: 10px;
    background-color: #C0C0C0;
   }
   #gridview
   {
     float: right;
     width: 675px;
   }

I tried faux column but no luck.

Q1: How to modify my CSS or using jquery?

Q2: The table width is hard to fit the width of #wrap(here is 800px). Any trick on it? Thanks for code help.

I am tring to make two columns having same height but failed. How to change my CSS or using Jquery? No table please. I have a gridview to display table from database.

My code:

<div id="wrap">
    <div id="header">
          <h1>TEST</h1>
    </div>
    <div id="sidebar">
        <ul>
                <li>nav1</li>
                <li>nav2</li>
                <li>nav3</li>
                <li>nav4</li>
        </ul>
    </div>
    <div id="gridview">

        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
</div> 

CSS:

 #wrap
 {
     width: 800px;
     background-color: #99c;
     overflow: hidden;
 }

 #header
 {
    border-style: solid;
    border-width: 1px;
    background-color: #ddd;
    width: 800px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #sidebar
  {
    float: left;
    width: 125px;
    padding-top: 10px;
    background-color: #C0C0C0;
   }
   #gridview
   {
     float: right;
     width: 675px;
   }

I tried faux column but no luck.

Q1: How to modify my CSS or using jquery?

Q2: The table width is hard to fit the width of #wrap(here is 800px). Any trick on it? Thanks for code help.

• javascript
• jquery
• asp
• css

• Update to: #gridview { margin-left: 125px; } and add at the bottom of it <div style="clear: both;"></div> - try that and report back? – Chris Carew Commented Mar 30, 2012 at 20:31

3 Answers 3

I like to do this using jQuery

jQuery(document).ready(function() {
    var divone = jQuery("#sidebar").height();
    var divtwo = jQuery("#gridview").height();

    var maxdiv = Math.max(divone, divtwo);

    jQuery("#sidebar").height(maxdiv);
    jQuery("#gridview").height(maxdiv);

});

This basically takes the height of both divs and gets the max height, then assigns the both divs the same height. This works great for expanding divs

Try this too:

function sameHeight(el1,el2) {
  var he1 = $(el1).height();
  var he2 = $(el2).height();

  if(he1 > he2){ $(el2).height(he1); };
  if(he1 < he2){ $(el1).height(he2); };
};

sameHeight(yourhtmlelement1,yourhtmlelement2);

You can use for various html elements!

What you need is a clearfix:

<div id="sidebar">
        <ul>
                <li>nav1</li>
                <li>nav2</li>
                <li>nav3</li>
                <li>nav4</li>
        </ul>
    </div>
    <div id="gridview">

        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    <span class="clear!></span>

Add this span at this locatiob (under the two floated divs)

And use this CSS:

.clear
{
    display: block;
    clear: both;
}

The two columns should now be the same height.