CODEWITHSUNDEEP
csslayouthtmlimage
ridermansb
ridermansb

Reputation: 11059

Div on the left side of an image

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.

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

Upvotes: 0

Views: 3109

Answers (3)

mu is too short
mu is too short

Reputation: 434665

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/

Upvotes: 3

clairesuzy
clairesuzy

Reputation: 27624

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

example

Upvotes: 2

user428071
user428071

Reputation:

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

See updated updated example here

Upvotes: 2

Related Questions