How do I get a three column layout with Twitter Bootstrap?

Question

I am trying to create a three column layout that is like the following:

http://www.manisheriar.com/holygrail/index.htm

It should be a fixed width

Answer 1

Try this: http://jsfiddle.net/andresilich/6vPqA/2/

CSS

.container-fluid > .sidebar {
    position: relative;
    top: 0;
    left:auto;
    width: 220px; /* width of sidebar */
}

.left {
    float:left;
}

.right {
    float:right;
}

.container-fluid > .content {
    margin: 0 240px; /* width of sidebars + 10px of margin */
}

HTML

    

      
Sidebar
      .....
    



    

      
Sidebar
      .....
    

---

Per comments, i updated my answer to carry the possibility to switch between right and left sidebar with just a class.

Now you can use the following in the

div:

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Demo: http://jsfiddle.net/andresilich/6vPqA/3/show/ Edit: http://jsfiddle.net/andresilich/6vPqA/3/

---

Another user asked about if this method can be adapted to the latest version of the bootstrap (v2.0 at the time of writing) so here is a demo that uses it:

http://jsfiddle.net/andresilich/6vPqA/13/

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...