CSS position a div based on dynamic height of another div - html

Question

In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.
https://jsfiddle.net/z77fwaj7/1/
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>

Answer 1

Is this Ok.
<style type="text/css">
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:0px;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
</style>
<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>

Answer 2

If anyone is curious I had to change my layout in order to get it working without javascript. BackgroundBanner won't change height when Banner shrinks, but in my case that doesn't matter since it will be out of view anyway.
https://jsfiddle.net/z77fwaj7/4/
css:
#Header
{
background-color: gray;
height: 50px;
}
#Background
{
position:absolute;
width:100%;
z-index:-1;
}
#BackgroundBanner
{
height: 50px;
background-color:orange;
}
#Banner
{
float:left;
background-color: orange;
height: 50px;
width:75%;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
html:
<div id="Header">header</div>
<div id="Background">
<div id="BackgroundBanner"></div>
</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="Banner">banner</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>

Answer 3

As a conclusion:
Using a value of an element on another element in css is not possible. (as far as i know)
So there are two solutions:
Change the layout.
Use javascript.
I would prefer the second. Don't know why it's such a shame to do so.
A short simple javascript is better then mess up the layout. (In my opinion)