Embedded divs in header: css issue - html

Question

I am trying to create the following structure using embedded divs inside a header:
The height and width of the red part is known and fix
The height of the green rectangle is known and fix
The overall width of the frame can vary, but is never smaller than the red part
I have tried with the following html code:
<header id="header">
<div id="yellowAndGreen">
<div id="yellow"></div>
<div id="green"></div>
</div>
<div id="red"></div>
</header>
and the following CSS:
#header {
width: 400px;
}
#yellowAndGreen {
}
#yellow {
background-color: yelow;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
}
but it does not work. I have created a JsFiddle. Can anyone modify it to create what I am looking for?

Answer 1

Use float:right; to make the red box float to the right. You'll need to adjust the html:
<header id="header">
<div id="alldivs">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</header>
and the css:
#header {
width: 400px;
}
#yellow {
background-color: yellow;
height:110px;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
float:right;
}
Please note you had misspelled "yellow", and that you need to set a height for the yellow <div>.
Finally here is the adjusted fiddle
Hope this helps

Answer 2

This uses flexbox, which has some support drop off on older browsers. I've excluded vendor-specific attirbutes for simplicity.
#header {
width: 400px;
display: flex;
}
#yellowAndGreen {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#yellow {
background-color: yellow;
flex-grow: 1;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
}

Answer 3

No floats or flexbox necessary!
Rearranged your HTML a bit. Set #header background-color to red and min-width so it will never be too small. Use calc() for #yellow's width so that the background red of it's parent will always be 150px wide.
#header {
width: 400px;
background-color: red;
width: 100%;
min-width: 150px;
}
#yellow {
height: 150px;
width: calc(100% - 150px);
background-color: yellow;
}
#green {
background-color: green;
height: 40px;
}
<header id="header">
<div id="yellow"></div>
<div id="green"></div>
</header>