add float div to this flexible layout - html

Question

I'm working with this layout.
I want to add a div next to content div.
I tried:
HTML:
<div class="container">
<header>here is the header </header>
<div class="sidebar">my sidebar content</div>
<div class="content">
/my text
</div>
<footer>
and the footer
</footer>
</div>
CSS:
.sidebar{
width: 100px;
float: left;
}
{
margin:0;padding:0;
}
html,body
{
height: 100%;
}
.container
{
-ms-box-orient: vertical;
display: -ms-flex;
height: 100%;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-flex;
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, footer
{
width: 300px;
}
.content{
width: 200px;
}
header
{
background: yellow;
}
.content
{
background: pink;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: auto;
height:0;
min-height: 0;
}
footer
{
background: gray;
height: 80px;
}
and changed the width but nothing happened. The new div stands on the bottom of the content div.
How can I fix this?

Answer 1

I think you need this:
DEMO
Wrap your content div's text in another div lft with float:left css then wrap lft and sidebar divs to content div
HTML
<div class="container">
<header>Your header</header>
<div class="content">
<div class="lft">Your text</div>
<div class="sidebar">Your Sidebar content</div>
</div>
<footer>Your footer</footer>
</div>
CSS
header, .content, footer {
width: 300px;
}
.lft {
width: 200px;
float: left;
}
.sidebar {
width: 100px;
float: right;
}

Answer 2

jsfiddle
are you tring to do this
*
{
margin:0;padding:0;
}
html,body
{
height: 100%;
}
.container
{
-ms-box-orient: vertical;
display: -ms-flex;
width:400px;
height: 100%;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-flex;
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, .content, footer
{
width: 200px;
}
header
{
background: yellow;
}
.row{
-ms-box-orient: vertical;
display: -ms-flex;
width:400px;
height: 200px;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-flex;
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.row,.content,.sidebar
{
background: pink;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: auto;
}
footer
{
background: gray;
height: 80px;
}

Answer 3

Float properties on flex items are ignored. So, any float set on .sidebar or .content will not work. This is by design in the flexbox spec: http://www.w3.org/TR/css3-flexbox/#flex-containers.
You could work around this by wrapping the .content and .sidebar elements in another element, and then use either floats inside it, or set the wrapper element to be a flex container in the column direction. Example:
<header></header>
<div class="content"><!-- set this to be the flex item, eg. flex: 1 1 auto; -->
<div class="content-inner"></div>
<div class="sidebar"></div><!-- float this, for example. -->
</div>
<footer></footer>
The important point is that flexbox will only allow you to line up (and distribute & size) elements in 1 direction (row OR column). It can allow wrapping, but you can't divide flex items in both the column and row directions at once. If you need layouts like the one you describe, you need to nest stuff.