/    Sign up×
Community /Pin to ProfileBookmark

text wrap in floated div?

Copy linkTweet thisAlerts:
Jun 25.2007

I’m making a page where there is an image and then text to the right of the image (the image and the text are both float:left)

my problem is that I’ve had to set the width of a containing div extra wide so as to accomodate text-resizing (if I don’t set the width wide enough, then the text gets jammed under the image on text-resize).
The problem with the extra wide div is that it causes a horizontal scrollbar to appear even if there isn’t any content extending beyond the window…
what I wish would occur is that the text would wrap on text-resize, then I wouldn’t have to set the div so wide and I wouldn’t get the scrollbar…this is how text in a table behaves but I can’t figure out how to do it in a floated div?

here are links to the page and its css…
[url]http://www.karlyoder.com/peterpagast/mrl_robeson.html[/url]
[url]http://www.karlyoder.com/peterpagast/css/global.css[/url]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJun 25.2007 — The page you posted works just fine. What's wrong with it? The text wraps on resize just fine. When it gets too wide, it bumps itself under the image. No problem there.

And which DIV are you talking about being "too wide"?
Copy linkTweet thisAlerts:
@VaporActionauthorJun 26.2007 — the text doesn't actually wrap, the lines don't break...the text just gets larger and then when it hits the side of the wrapper div it drops below the image...in a table when the text hits the side of the table it breaks the lines of the text and then it just continues vertically, breaking lines as it needs to...

the "too wide" div is the wrapper div...it's "too wide" because it causes a horizontal scrollbar even though there's no content beyond the window...
Copy linkTweet thisAlerts:
@toicontienJun 26.2007 — Ah, I see what's going on. The DIV tag that contains the text is floated left, and you want the text inside of it to wrap. Problem is, it won't wrap because that DIV is floated. You need to give that DIV a width. Try this out for a markup structure and styles for your photo and caption:
[code=html]<dl id="fullsize">
<dt><a><img ... ></a></dt>
<dd>
<em>Caption here</em><br>
More caption
<strong id="fullnext"><a href="...">next &gt;&gt;</a></strong>
</dd>
</dl>[/code]
A definition list is more descriptive of the relationship between an image and it's caption. Then the CSS:
#fullsize {
margin: 0;
width: 900px;
}

#fullsize dd {
display: inline; /* For IE 5 and 6-Win */
float: left;
margin: 0 0 0 60px;
padding: 0;
width: 440px;
}

#fullsize dd #fullnext {
font-weight: normal;
margin: 50px 0 0 0;
}

#fullsize dt {
float: left;
width: 400px;
}
Copy linkTweet thisAlerts:
@VaporActionauthorJun 26.2007 — hey thanks man!

setting a width on the float made it wrap! yaayyyy!

I also took your advice on the more semantic markup...the only thing I changed was to use span instead of strong and I also needed to set display: block for the margins to work...
×

Success!

Help @VaporAction 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...