fortysixandtwo fortysixandtwo - 8 months ago 55
CSS Question

Floats inside absolute positioned div

Is it possible to have multiple floats inside a absolute positioned div without specifying the width of the absolute container?

See image:
enter image description here

Ninja edit:
Your code with absolute and floats works perfectly, but just not in my case. I tried to simplify the problem, but obviously something else is wrong. I will come back to you as soon as i figure out why. Sorry.

Edit 2:
Right, this is the reason for my problem.


<div id="anotherContainer">
<div class="main">
<div class="left">Left</div>
<div class="right">Right</div>


#anotherContainer {
position: relative;
outline: 4px solid red;
width: auto;
height: auto;
display: inline-block;

border: 1px solid #f00;
position: absolute;

float: left;
border: 1px solid #0f0;
padding: 20px;

float: right;
border: 1px solid #00f;
padding: 20px;

JS fiddle

My mistake, I assumed the container #anotherContainer would not have any effect on this.


remove position relative on #anotherContainer problem will be solved. check jsfiddle working link