Question

I’m having trouble controlling the position of div blocks. Here is the html code.

<div id="d1">
    <div id="d2">
        <div id="d3" style="float:left" >
            <img src="image.jpg" > 
        </div>

        <div id="d4">
            Lorem Ipsum .... Dummy Text
        </div>
    </div>
    <div id="d5">
        Stop this text from moving up
    </div>
</div>

I want d3 and d4 to be 2 parallel columns, and d5 should come beneath both of these, sort of like footer in most websites. So when I add the float:left style to div d3, the d5 text moves up just under the “Lorem Ipsum” text. How can I have the 2 column working, and make the position of d5 fixed? Its pretty basic, but I’m not sure what I’m missing.

Answer 1

Try adding a clear:both; to the div with the id ‘d5’

in your css for example;

div#d5
{
    clear:both;
}

more information about this css attribute can be found here