Css fluid layout with two columns

Question

I need to do a layout in this way:

----------------------
|   header           |
----------------------
|  N  |              |
|  A  |   CONTENT    |
|  V  |              |
|-----|              |
|     | ----BAR----  |
|EMPTY|              |
|     |              |
----------------------

I want the overall width to be 100% of the body, the navigation has width 15% but min-width 120px. The width of the bar (that is an element in the content div) has to be 100% of the content div.

In the html I have the limitation that the navigation div has to go before the content div.

EDIT: My code in the html is

<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>

The code i have in the css right now is:

#nav {
    float: left;
    width: 15%;
    min-width: 120px;
    }
#content{
    float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}

Could you help me please?

@Albert, adding multiple answers to a rather simple question can hardly qualify as helpful and might be perceived as *spam*. From the outside, it looks like you're fishing for votes rather than trying to help. It would be better if you grouped your answers into only one and you would explain each technique, it's pros and cons. — tao, Feb 09 '17 at 15:19
@AndreiGheorghiu So multiple answers should be answered in one post? — mateos, Feb 09 '17 at 15:20
@AndreiGheorghiu http://meta.stackexchange.com/questions/25209/what-is-the-official-etiquette-on-answering-a-question-twice?noredirect=1&lq=1 Says it's fine to post multiple questions "The only situation where posting multiple answers to the same question may be appropriate is when each of the answers, on its own, could be a valid and complete answer to the question." — mateos, Feb 09 '17 at 15:27
@Albert I never said it's not allowed. Is there *anything* in my previous comment unclear? — tao, Feb 09 '17 at 15:29
@AndreiGheorghiu I just fail to see how multiple posts with **different** answers doesn't "qualify as helpful". The reason multiple answers is better is because the community can upvote the better answer. — mateos, Feb 09 '17 at 15:33
@Albert you should add a few more then. This layout can be achieved in at least 2 more different ways. I'll make sure to come by next week, read all of them and upvote where appropriate. — tao, Feb 09 '17 at 15:36
@AndreiGheorghiu Just listing the ones I know, other users can add more. — mateos, Feb 09 '17 at 15:39

mateos · Accepted Answer · 2017-02-09T15:04:12.503

0

I like the flexbox method more, however keep in mind this doesn't work with IE9 and below.

Flex-basis (aka flex: {shrink} {grow} {flex-basis}) is required because flex doesn't work well with css widths.

*{
  margin: 0;
  padding: 0;
}

header{
  padding: 10px;
  width: 100%;
  background: #888;
}

.sidebar{
  padding: 10px;
  flex: 0 0 120px;
  background: #07f;
}

.content{
  padding: 10px;
  background: #ddd;
  width: 100%;
}

.container{
  display: flex;
  flex-direction: row;
}

<header>
  This is the header
</header>

<div class="container">
  <div class="sidebar">
     This is the sidebar
  </div>

  <div class="content">
    This is the content
    <br>
    test
  </div>
</div>

edited Feb 09 '17 at 15:04

answered Feb 09 '17 at 14:58

mateos

1,405
1
17
26

This worked for me but with flex-direction: column; instead of flex-direction: row;! – Benzio Feb 09 '17 at 15:03
That's odd haha – mateos Feb 09 '17 at 15:04
Actually, decent fallbacks for `flexbox` can be provided so it displays the same as low as IE8. It really depends on what exactly you use from `flexbox`. – tao Feb 09 '17 at 15:27

mateos · Answer 2 · 2017-02-09T15:08:00.463

-1

This method is static and doesn't allow for percentages (you'd have to use media queries for other screen sizes.)

*{
  margin: 0;
  padding: 0;
}

header{
  padding: 10px;
  width: 100%;
  background: #888;
}

.sidebar{
  box-sizing: border-box;
  float:left; 
  background: #06f;
  display:block;
  width: 120px;
  padding: 10px;
}

.content{
  box-sizing: border-box;
  padding: 10px;
  display:block;
  background:#ddd;
  margin-left: 120px;
}

<header>This is the header</header>
<div class="sidebar">
   This is the sidebar
</div>
<div class="content">
  This is the content
  <br>
  test
  <br>
  test
  <br>
  test
</div>

edited Feb 09 '17 at 15:08

answered Feb 09 '17 at 14:52

mateos

1,405
1
17
26

2

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. – Heretic Monkey Feb 09 '17 at 14:54

Css fluid layout with two columns

2 Answers2

Linked