I am trying to place text on the left of a container with an image to the right of it. Using the code below, the image floats left as it should, but it drops much lower than the text. Please help.

#wilmingtonlinks{
    width: 650px;
    background-color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    color: #333333;
}

#photos{
    float: right;
    width: 100px;
    background-color: #ffffff;
    height: 100px;
    overflow: hidden;
    clear: both;
}

#text{
    float: left;
    width: 400px;
    background-color: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 100px;
    overflow: hidden;
    color: #333333;
    clear: both;
}
<div id="wilmingtonlinks">
<div id="text">Text is here.</div>  
<div id="photos"><img src="images/cityhall.jpg" ></div>
</div>

3 answers

0
points

If I am understanding your problem correctly, you should remove the clear: both; property from #photos. That is what is pushing it below the text block.

Answered almost 8 years ago by Andrew Thomas
Ktash 1851
0
points

Right floated content needs to go before content it is being put next to. Once the image is floated, you don't need to float the text, it should work without the float: left;

Answered almost 8 years ago by Ktash
0
points

Thank you both very much for your help. I removed clear: both from #photos. Also, I now understand why I didn't need to float the text. Both answers were very helpful. Again, thanks.

Answered almost 8 years ago by Dee Phillips