0

This is a question based on this question: Twitter bootstrap 3 two columns full height

I have the same layout. But, when I try to put a DIV in the content part, it pushes the content of the sidebar down. Here's a Fiddle

<header>Header</header>
<div class="container">
    <div class="row">
      <div class="col-md-3 no-float">Navigation</div>
      <div class="col-md-9 no-float"><div><div style="width=100%;height:55px;background:red"></div>Content</div></div>
</div>

CSS:

html,body,.container
{
    height:100%;
}
.container
{
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
header
{
    background: green;
    height: 50px;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-md-3.no-float, .col-md-9.no-float {
    float: none; /* thanks baxabbit */
}
.col-md-3
{
    display: table-cell;
    background: pink;
}
.col-md-9
{
    display: table-cell;
    background: yellow;
    float: none;
}

If you have other suggestions, I need to do the following layout using Bootstrap and Angular, keeping the idea of having full-height columns from the upper post:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  | Nav.Header |    ContentHeader               | < |
  |------------|------------------------------------|
  |Navigation  |         Content                | T |
  |            |                                | E |
  |            |                                | X |
  |            |                                | T |
  |            |                                |   |
  |            |                                |   |
  |            |                                |   |
  +------------+------------------------------------+

Thank you

Community
  • 1
  • 1
DanConstantin
  • 35
  • 1
  • 6
  • Could you edit the Fiddle I added, so it shows what goes wrong? – Rvervuurt May 15 '15 at 12:18
  • 1
    add vertical-align: top; – Navneet Panchariya May 15 '15 at 12:19
  • @Rvervuurt added Fiddle – DanConstantin May 15 '15 at 12:21
  • @NavneetPanchariya yes! it seems to work! I will continue to add other elements to see if it doesn't mess something else, but it shouldn't; thanks! – DanConstantin May 15 '15 at 12:26
  • 1
    What do I have to change in the fiddle to make it do the thing you don't want? When I add a div to the content-div, it doesn't move anything? – Rvervuurt May 15 '15 at 12:26
  • @Rvervuurt the fiddle was what I obtained after I added the div; if you look, you see that Navigation is not at the top of the column – DanConstantin May 15 '15 at 12:28
  • I personally feel `vertical-align: top;` as a work around than a solution. Reason: `table-cell;` is expanding the navigation on insertion of the content div. So this is a typical traditional issue where previously tables were used for designing. The solution over there was to simply add a `col-span` with the merged `td's` to make it work. I hope this needs to be done over the `div` where you have added the content via a class that does the job of `col-span`. Hope this helps. – Nitesh May 15 '15 at 12:34

0 Answers0