CSS: Position problem

Question

Hey guys. Im setting a position:absolute to my UL to make it appear on the bottom of div #destaques, but isnt work. Whats going on?

<div id="destaques">
<ul>//stuff</ul>
<div class="banner"><img src="images/001.jpg"/></div>
<div class="banner"><img src="images/002.jpg"/></div>
<div class="banner"><img src="images/003.jpg"/></div>
<div class="banner"><img src="images/004.jpg"/></div>
</div>

Its currently appearing on the page bottom.

        #destaques {
            margin:0;
            padding:0;
            width:1000px;
            height:250px;
            float:left;
            overflow:hidden;
        }

        #destaques .banner {
            position:absolute;
        }

        #destaques ul {
            float:left;
            border:1px solid #777;
            background:#fff;
            position:absolute;
            margin:0;
            color:#333;
            padding:0;
            right:0px;
        }

What im doing wrong?

Thanks!

You should read up on CSS layout some more. There is absolutely no reason for giving float and position: absolute to the same element. — Jon
– Jon, Commented Mar 22, 2011 at 20:31
I found my answer. I just have to setup the destaques id to position: relative. Thanks to all. — Lucas Veiga
– Lucas Veiga, Commented Mar 22, 2011 at 20:48

ckaufman · Accepted Answer · 2011-03-22 20:29:26Z

3

You need to add:

position:relative;

to your #destaques div

answered Mar 22, 2011 at 20:29

ckaufman

1,4979 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ckaufman Over a year ago

Relative positioned containers will hold absolute positioned elements within it that are contained inside its tags.

Collectives™ on Stack Overflow

CSS: Position problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related