how to position divs within another div

html css positioning
Jason S picture Jason S · Jul 12, 2013 · Viewed 75.2k times · Source

I want to position divs within another div.

Here's the relevant snippet of css (full example on cssdesk):

        .textblock-container {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        div.textblock {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid black;
            position: absolute;
            text-align: center;             
            background: rgb(0, 150, 0); /* Fall-back for browsers that don't
                                support rgba */
            background: rgba(0, 150, 0, .5);
        }

and the relevant snippet of html:

    <div id='blockdiv1' class='textblock-container'>
        <div id='blockdiv2' class='textblock'><span>foo (NW)</span></div>
        <div id='blockdiv3' class='textblock'><span>bar (NE)</span></div>
        <div id='blockdiv4' class='textblock'><span>baz (SW)</span></div>
        <div id='blockdiv5' class='textblock'><span>quux (SE)</span></div>
    </div>

The problem is that the foo/bar/baz/quux blocks are positioned relative to the browser window, not to their parent element.

What am I doing wrong and how can I fix it?

Answer

Ennui picture Ennui · Jul 12, 2013

Add position: relative to the parent .textblock-container div.

Absolutely positioned elements are positioned relative to their nearest positioned parent (e.g. the nearest parent element with a position of absolute or relative), so if they have no explicitly positioned parents (default position is static) they will be relative to the window.

Related questions

Position an element relative to its container

I'm trying to create a horizontal 100% stacked bar graph using HTML and CSS. I'd like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph. I also want to have …

Read More
How to make a HTML list appear horizontally instead of vertically using CSS only?

I need this because I want to make a menu (which is made from a HTML list) appear horizontally. I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page. …

Read More
CSS position:fixed inside a positioned element

I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it's right top corner so …

Read More