Div on the left side of an image

Question

I have a div with several other divs inside it.

I would like to place a an image to the right side of this div.

I've tried all types float:left; clear:both; .... but does not work.

Here you can see the complete code of the page.

The div marked in blue, will be on the left, the img marked in red, should be on the right side of the blue div.

PS The image is not available, so it will display alternative text, but this should not be important.

Answer 1

Float #waycontact to the left:

div#waycontact {
    width:300px;
    margin:20px 40px;
    float: left;
}

Then float #logo to the left and give it a margin-top to match #waycontact :

img#logo {
    float: left;
    margin-top: 20px;
}

Then add a clearing <div> immediately after #logo to clean up the floats:

<div style="clear: both;"></div>

http://jsfiddle.net/ambiguous/CdqJk/1/

(Original backwards version below)

First, move #id above #waycontact in the HTML. Then:

 img#logo { float: left; margin-top: 20px; /* to match #waycontact[margin-top] */ } div#waycontact { width:300px; margin:20px 40px 20px 100px; } 

The margin-left:100px on #waycontact is to make enough room for the #logo , the real margin value will depend on how big the logo image really is.

http://jsfiddle.net/ambiguous/CdqJk/

Answer 2

You need to add float:left; to div#waycontact so it can be in the flow of the structure.

See updated updated example here

Answer 3

float #waycontact left. and then make sure the #content clears

example