CODEWITHSUNDEEP
htmlcsscss-position
Scott Selby
Scott Selby

Reputation: 9570

css div position

I have looked all over and can't seem to find the right answer. These div's are all created dynamically from database. ex.

<div class="accordian_header"><div class="title"> any title </div></div>
<div class="accordian_body">
    <div class="topleft"> info....</div>
    <div class="topright"> info...</div>
</div>

now I want class "topleft" to be in the top left of the "accordian_body" div and "topright" to be in the top right. The problem is if I assign them position: absolute then they go way off to the top right of the page. If I choose any other type of positioning it does not work.

Now if I make "accordian_body" set to position: absolute , then topright and topleft work. The problem is I'm creating them all dynamically so they can't be absolute. They need to be created ontop of each other and leaving no position attribute works prefectly for that. I found that for "topleft" and "topright" I can use float: left , or right and that works , but if I want text or an image on top or bottom I have no luck so far.

Upvotes: 0

Views: 127

Answers (2)

animuson
animuson

Reputation: 54719

Try setting position: relative for .accordion_body. Then the absolutely positioned elements within it will pay attention to that container instead of whatever ancestor they're using, without disrupting the normal flow of your document.

Upvotes: 2

Tim Hobbs
Tim Hobbs

Reputation: 2017

Make the container relative, then you can absolutely position the children.

CSS 

.accordian_body {
    position: relative;
}
.topleft {
    position: absolute;
    top: 0;
    left: 0;
}
.topright {
    position: absolute;
    top: 0;
    right: 0;
}

Upvotes: 2

Related Questions