/    Sign up×
Community /Pin to ProfileBookmark

Floating image in text problem

Copy linkTweet thisAlerts:
Dec 10.2007

Hi everyone

I’m stuck with a little problem. I like to have floating images in my text like here:
[url]http://www.meijer.li/php/biking/wildspitz.php[/url]
But I would like to start a new title on a below the image and it’s description which are floating to right side. Any idea how i can do this without using tables?

Thanks and cheers
/erik

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TJ111Dec 10.2007 — It's not hard, just wrap the image and anything you want associated with it in a div.
<i>
</i>div.image {
width:20%;
float:left;
text-align:center;
}
div.image p {
text-decoration:italic;
}

then in your html

&lt;h2&gt;Overview&lt;/h2&gt;

&lt;div class="image"&gt;
&lt;img src="/path/to/image.jpg"&gt;
&lt;p&gt;Image Description&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;This text will wrap around the image and its
description, if it's long enough.&lt;/p&gt;
Copy linkTweet thisAlerts:
@ErikTheSickauthorDec 10.2007 — Thanks for your reply mate, but that is what I already have. So text is wrapping properly around the image if it is big enough.

The problem is, if it is not big enough, the title of the next paragraph wraps also around the image, an I like to prevent that.

I hope I made myself clear now...
Copy linkTweet thisAlerts:
@TJ111Dec 10.2007 — Oh, I see what you mean. You can do either of the following to prevent that:
<i>
</i>&lt;h2 style="clear:left"&gt;

Or better
<i>
</i>.clearL {
clear:left;
}


&lt;h2 class="clearL"&gt;

//this way you can prevent from having to write multiple inline styles throughout your source.
Copy linkTweet thisAlerts:
@ErikTheSickauthorDec 10.2007 — yes, thats right what I was looking for.

thanks a lot mate!
×

Success!

Help @ErikTheSick spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...