I have two divs, which are 300px right, 300px left respectively. Anything placed below the div code still appears at the same height?

Question

Sorry if the title's hard to understand, hard to explain in words.

This is my CSS:

#container {position:absolute; left:500px; width: 300px; clear: both;}
#container2 {position:absolute; right:500px; width: 300px; clear:both;}
#image {width: 100%;}
#text {text-align: center;}

and my HTML:

<div id="container">
  stuff
</div>
<div id="container2">
  more stuff
</div>

And it works. Essentially, there is an image with centered text underneath beside an image with centered text underneath. My problem is, whatever code I place underneath still appears at the same height the two divs started at.

What have I tried? Creating a wrapper for both divs with 100% width and a certain amount of pixels in height, which didn't work.

#wrapper {position:absolute; width:100%; height:360px;}

Random assortments of relative and absolute positions, and giving the code underneath the divs it's own position properties. All failed.

I've looked at lots of questions similar but nothing I found made sense or worked, either.

Answer 1

You need to take the position: absolute off your wrapper. See http://jsfiddle.net/tbnrLfbe/

I'm not 100% sure what you're trying to do and whether you're intentionally using absolute positioning, but I imagine what you're actually looking for is floated elements.

HTML:

<div id="wrapper">
    <div id="container">
        Line1<br>Line2<br>Line3
    </div>
    <div id="container2">
        more stuff
    </div>

    <div class="clear"></div>
</div>

Test

CSS:

#wrapper {
    width: 600px;
}

#container, #container2 {
    width: 300px;
    float: left;
}

.clear {
    clear: both;
}

This way you don't need to set a fixed height on your wrapper, and the content will naturally flow. See http://jsfiddle.net/tbnrLfbe/1/