CODEWITHSUNDEEP
htmlcss
Dusteh
Dusteh

Reputation: 219

2 Sidebar Columns Layout (How)?

I wish to know how would you apply a 2 column sidebar via HTML/CSS a fixed sidebar to the left and the other to the right?

Refer to this:

enter image description here

Upvotes: 0

Views: 638

Answers (2)

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a FIDDLE

<header>

</header>

<div class="wrapper">


</div>

<div class="sidebar-l">

</div>

<div class="sidebar-r">

</div>

<footer>

</footer>


header {
  background:#00ff18;
  width: 60%;
  height: 120px;
  margin: 0 auto;
}
.wrapper {
  background: #ffffff;
  width: 60%;
  min-height: 600px;
  margin: 0 auto;
}
footer {
  background: #151316;
  width: 60%;
  height: 120px;
  margin: 0 auto;
}
.sidebar-l,
.sidebar-r {
  background: #00ffae;
  position: fixed;
  top: 0;
  width: 20%;
  height: 1000px;
}
.sidebar-l {
  left: 0;
}
.sidebar-r {
  right: 0;
}

If you want to use dynamic height for sidebars and keep it on window resize then add this script just before the </body> tag.

<script>
  $(function(){

    $('.sidebar-l, .sidebar-r').css({ height: $(window).innerHeight() + 'px' });

    $(window).on('resize', function(){
      $('.sidebar-l, .sidebar-r').css({ height: $(window).innerHeight() + 'px' });
    });

  });
</script>

And of course (if you decide to use the script above) don't forget to include jQuery library in your <head> section

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Upvotes: 1

Amo
Amo

Reputation: 2944

Easy!

You really need to split the page's content into three columns; left, center and right. Then you can create three divs and float them all to left.

Eg:

<div style="float:left;background:yellow;width:20%;position:relative">Left column</div>
<div style="float:left;background:green;width:60%;position:relative">
  <div style="width:100%;border-bottom:1px solid #cfcfcf;height:50px;float:left">
      Header
  </div>
    <div style="width:100%;clear:left">
      Main content
  </div>

Right column

See jsfiddle: http://jsfiddle.net/cca5P/

Upvotes: 0

Related Questions