fortysixandtwo fortysixandtwo - 5 months ago 23
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.

HTML

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


CSS

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

.main{
border: 1px solid #f00;
position: absolute;
}

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

.right{
float: right;
border: 1px solid #00f;
padding: 20px;
}‚Äč


JS fiddle

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

Answer

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

http://jsfiddle.net/rP76V/3/

Comments