Twitter Bootstrap Question posted in

A good way to build a sidebar area using HTML and CSS – Twitter bootstrap

What is a good way to build a web page if you want to have a content-area and two sidebars next to it. One left and one right. Good examples for such a layout are Twitter and Quora.

Some ways that I could think of are tables (but I hear this is not a good practice), Bootstrap grid system (which I tried screwing around with, but it doesn’t seem like giving you much flexibility) and… the way I did this before (and maybe the most inappropriate one), hard coding two div tags next to the content one using the CSS position (absolute) property.

I heard these days that I could use the display: flex property. Is this a good solution?

Tags:

2

Answers


  1. 0

    Here is a basic example using flex:

    http://codepen.io/anon/pen/bgMVKO

    #container{
  display: flex;
}
#container div{
  flex-grow: 1;
  background-color: red;
  text-align:center;
}
.sidebar{
  max-width:150px;
  background-color: yellow !important;
}
    <div id="container">
  <div class="sidebar">
    Side Bar Left
  </div>
  <div>
    Main Content
  </div>
  <div class="sidebar">
    Side Bar Right
  </div>
</div>

    -Michael

    Login or Signup to reply.
  2. 0

    Yes, flexbox is one if the best so long as you don’t need to support old browsers.

    Here’s a basic example, but I would suggest you start doing more research on HTML and CSS

    .wrap {
  display: flex;
  height: 400px;
}

.sidebar {
  background: #ddd;
  width: 200px;
  padding: 1em;
}

.content {
  background: #f5f5f5;
  padding: 1em;
  flex: 1;
}
    <div class="wrap">

  <div class="sidebar">Sidebar</div>
  
  <div class="content">Content</div>
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search