Div Under Another Div

with css, can I put a div under another div without using absolute positioning? I have these two divs, and I would like the solid white one to appear directly under the one with t

Solution 1:

Without using positioning, I added a style to your content div using negative margins:

.content {
    margin-top:-100px;
}

Working demo here: http://jsfiddle.net/WtGsv/3/

I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.

However if you want to use absolute positioning, I have updated your jsfiddle here: http://jsfiddle.net/WtGsv/12/

Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;

Solution 2:

Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/

or you can use negative margins margin-top: -100pxhttp://jsfiddle.net/WtGsv/5/

With both solutions, the div at the bottom still takes space where it would be originally

Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/

Solution 3:

I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins

Demo

HTML

<divclass="wrap">
    Add a line item
    <divclass="inner_wrap"><textarea></textarea></div></div>

CSS

body {
    background-color: #aaaaaa;
}

.wrap {
    border: 4px dashed #ff0000;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-family: Arial;
    position: relative;
}

.inner_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #919191;
    top: 0;
}

Solution 4:

You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.

Example HTML:

<div id="bottom">
    lorem ipsum

    <div id="top">
        hello world
    </div>

</div>

CSS:

#bottom {
    background:red; /* to see dimensions */position:relative;
}

#top {
    background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Here is a JSfiddle.

Solution 5:

If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.