Div container going behind another one

Question

If i resize the browser window c3 gets behind c2, I want c2 to be have a "barrier" so c3 does not go over/behind it. I've tried a lot of things with no success.

#c1 {

 float: middle;
 width: 100%;
 height: auto;
 margin: auto;
}

#c2 {

 float: left;
 width: 100px;
 height: auto;
 margin: auto;
}

#c3 {

background-color: blue;
float: middle;
width: 500px;
height: 100px;
margin: auto;

}

<div id="c1">
<div id="c2">
a
b
c    
</div>
<div id="c3"></div> 

Answer 1

Try floating them all left like so..

#c1 {

float: left;
width: 100%;
height: auto;
position: relative;
}

#c2 {

 float: left;
 width: 100px;
 height: auto;
 position: relative;
 }

#c3 {

background-color: blue;
float: left;
width: 500px;
height: 100px;
position: relative;

}

<div id="c1">
</div>
<div id="c2">
a
b
c    
</div>
<div id="c3"></div> 

Answer 2

Float:middle 

isn't a real CSS property.

I'm not sure where you're putting your code but if things are overlapping it sounds like you'll want to use

position:relative

rather than

position:abolute

Try to add

position:relative !important

on those divs if you're using some sort of a CMS system.

Edit: after reading your comments

Display: Inline 

is what you're looking for