My images in css are not floating properly? PLEASE HELP?

0 ⤊

My images in css are not floating properly? PLEASE HELP?

I am trying to get my images to float to the right but its not working. I have tried multiple tutorials and I have several books but nothing seems to work. The image either doesn't appear at all (so I think I did somethign wrong), it moves to the right but the text does not flow around the images but leaves a wide gap of empty space in the floated area, or it doesn't get pushed to the right side at all.

I simply want to have images to the right of my text on this website.

Please tell me how I am to do this. I would like the full code and if possible some explanations. I am new to css so please be very clear (many explanations are too loose to understand if you are not familiar with the syntax)

my image info would be:
image/good-design01.jpg width:500 height:486

This info will be put into a div wrapper that is set to auto margins(a centered div). It will also be put inside another div with paragraph formatting...I wonder if these are causing problems.

2007-08-31 02:13:38 · 4 answers · asked by Anonymous in Computers & Internet ➔ Programming & Design

4 answers

It sounds as if you want to center the contents of the div and then float the div to the right??? If that's what you want then,

This is my image

...adjust margin, padding, height, width as appropriate; remember that your image will get floated SO FAR right that you blamed well add some margin to the right of the div so that it doesn't look goofy at the right side of the page, and you blamed well better add some stuff left and bottom so's text doesn't run "flat into" it!

You may want, further, to make sure the image in one paragraph doesn't "run into" an image in the paragraph above!, so you may have to add "clear: right;" to the div style;

You may want to occasionally add "clear: both;" to the pararagraph.

At the bottom of the div, to keep stuff from flowing out the bottom of the div, you may have to throw in the traditional cheat:

...oh and p.s. add each image div JUST ABOVE the paragraph to which the image is to be floated right

2007-08-31 04:45:11 · answer #1 · answered by fjpoblam 7 · 0⤊ 0⤋

I do this all the time, it is very easy when you know how.

I have this in my css style:

div.r {
float:right;
}

And when I want to put an image in, I put this in the body where I want the image to appear:

this is the text to go next to and flow under the image

The width attribute is optional, but see note below. The float div goes before the text which will surround it.

One possible problem you may have is if your image is too big. With big pics I set the width to 400 which is usually big enough and only takes up half the space on a 800 width display.

Hope that helps.

2007-08-31 11:16:55 · answer #2 · answered by Anonymous · 0⤊ 0⤋

Assuming you are putting this into the HTML then the syntax for a left aligned image is

You can define this in CSS but this is inadvisable as you will be unable to modify individual image positions unless you define the image location for each DIV class - which would make the CSS file unnecessarily large....

Alternatively you can set the conditions for an image class and use this to float - but that is slightly more complicated and as I am completely unaware of what you are trying to achieve it may be inappropriate.

I only use CSS - so any of the examples at

http://mybranding.info/examples.php

Should help if you examine the CSS and html

2007-08-31 09:56:33 · answer #3 · answered by Anonymous · 0⤊ 0⤋

A link would help, put it online some place and we can take a look.

It sounds like it is in a block level container. Is it in an A tag or a DIV. Try using float: right and display:inline on it or use a background colour on the containing elements to see how much space they are taking up on the page.

Best bet is to use Firefox and download the Firebug extension and use the tutorials to help you find your way around the page elements. Most developer use this combination

2007-08-31 09:20:38 · answer #4 · answered by rupertbreheny 1 · 0⤊ 0⤋