Floating Lists around Images

[birgi]

Hi there, I'm Andrew,

So I had one of those professional slicing services and I need to troubleshoot something.

http://www.birgimedia.com/qinc/index.shtml

In the main column of content, I want the text to float around the image (bullets and all) instead of starting the next paragraph below the image.

Also if you wouldn't min, do you think this is good/clean CSS? or not-so-much? (why)

 

[Foamcow]

To keep it simple,

<img src="images/photo-home.jpg" width="184" height="150" [COLOR=red]style="float:left;"[/color] />We are determined to exceed all of

However, I don't really like the size attributes on the image. Personally I tend not to bother with them. If you need to size the image use CSS.

You might like to give the image an ID to apply styling to it. Or do as I sometimes do and create a class for floating images.

img.right {
float:right;
margin-left:8px;
}

img.left {
float:left;
margin-right:8px;
}

If, however it's just this one image then using an inline style is acceptable I guess.

The markup, doesn't validate and it could certainly be optimised. Just fix the validation errors then leave it alone, it's fine.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[birgi]

Thanks for that!

I tried each method, and nothing is working.

Something else is interfering with the ability to float. The paragraph/lists/headings below just wont move up around the image.

You can check the page again, as I'm now using your inline suggestion.

http://www.birgimedia.com/qinc/index.shtml

How can I get the text below the first paragraph to move up?

 

[Vragabond]

What is not allowing the floats is the fact that all your paragraphs are floated too. Since paragraphs have good amount of text within them (enough to reach the full width of their container) there is simply not enough space for them to float next to the image. That is why they float below it.

I suggest you remove the css rule that floats all paragraphs.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[birgi]

I'm so frustrated I want to stab my eyes out! lol

I removed the float rules from everything in my "box2" div.

Yet the text still refuses to float for us. Any ideas?

Thanks

 

[birgi]

The links again.

http://www.birgimedia.com/qinc/index.shtml

http://www.birgimedia.com/qinc/css/all.css

 

[traingamer]

It's moatly because the image is inside the 1st paragraph.

All of the paragraphs have a fixed width which won't allow them to float beside each other (within a column of the same width).

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[traingamer]

*mostly*

 

[birgi]

Gee whiz! I can't believe how complicated this is. It's still not working.

I removed all the floats and left it only on the image.

Have a look

http://www.birgimedia.com/qinc/index.shtml

And the CSS:

http://www.birgimedia.com/qinc/css/all.css

Thanks for your input so far guys!

 

[birgi]

(i also took the image outside the paragraph)

The more specific your solution, the better! As I am CSS challenged.

 

[traingamer]

(i also took the image outside the paragraph)

No. This is an image outside the paragraph (tested - works)

[COLOR=blue]<img src="images/photo-home.jpg" />[/color]<p style="float: left; width: auto;">We are 
determined to exceed all of your expectations, regardless of the task.</P>
<P style="float: left; width: auto;">Our well-crafted and tested protocols return disabled employees to the 
workplace earlier than expected to the benefit of both employee and 
organization. </P>

Your code has (or had earlier) widths assigned to the paragraphs, so there was not enough room to float them in the column. I have overridden that with inline styles to demonstrate a working solution. I would not likely use inline styles in a final solution - I would rewrite your overly complex css to accomodate this.



Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

In your CSS you have:

#content .column1 p {
[!][s]float: left;[/s][/!]
line-height: 15px;
margin: 0pt;
padding: 15px 10px 0pt 15px;
width: 434px;
}

Remove the highlighted part.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[traingamer]

Vragabond, doesn't he have to remove the width and keep the float if he wants to float the text?
(or use width:auto)

Or am I missing the intent here? (which happens often enough)

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

No, actually he doesn't. Because as you know, paragraphs, if not specified differently will be at 100% width. Therefore his width of whatever it is will work as well.

It won't work together with float however. When you float elements, the width switches from 100% to auto or in OP's case, the specified 434px. Float will mean that paragraphs will attempt to float next to other elements if space. Since they are about as wide as the container, both things won't float. You can float a picture or paragraph, but not both. If you do both, then their combined widths cannot supersede that of the container.

OP is already floating the image, so he should not float the paragraphs as well.

But as for the width or no width question. When there's one floated element next to another non-floated, the floated element will float above part of the non-floated element and cover its background, borders and such but not its contents. The contents will wrap around the floated item. You can see that clearly by adding the background color and borders to the non-floated element. You will see that they will lie underneath the floated element.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[birgi]

Thanks for the banter! You really helped me figure it out.

Do you think the markup is ridiculously complex? I'm currently arguing with the slicing service because I'm totally dissatisfied with the CSS markup. Needlessly complicated?

 

[traingamer]

Vrag, thanks for the explanation! Tunnel vision impedes my thought processes sometimes oftimes.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Foamcow]

That's the reason I charge alot more than a slicing service

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.