asif khan asif khan - 2 years ago 69
HTML Question

How to make responsive left side column in html

I am using 2 rows (header & footer) 1 column (left side) & 1 main content div layout.

It's rock hard layout.

Now when I fetch data using Ajax the main content div stretch because of data & left bar also needs to be stretch and connect to footer but it doesn't.

In sort I want responsive height of left side bar.

Images are below

without data

with data

Thanks in advance.

Answer Source

What about this?

Example code

.header{background:red; display:block; color:#fff; padding:20px}
.container{display:table; width:100%}
.sideBar{background:blue; width:23%; color:#fff; padding:20px; display:table-cell; vertical-align:top;}
.bodyContent{background:yellow; padding:20px; display:table-cell; vertical-align:top;}
  .container,.sideBar,.bodyContent{display:block; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download