/    Sign up×
Community /Pin to ProfileBookmark

sink rather than float

Copy linkTweet thisAlerts:
Oct 08.2008

Hlo,

If anyone has any ideas on this one, i’d be much obliged! I’m trying to make a page which consists of text that wraps around a block of secondary content. Both the text and the block of secondary content are dynamically generated so there’s no telling how long either one will be.

Ideal candidate for a float, the only problem being that the block has to be aligned at the bottom (i.e. sink) rather than the top (float). The best I’ve been able to come up with is absolute positioning and floating with a negative top-margin although this positions the secondary content over the text rather than having the text wrap around.

Ideas welcome!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FourCourtJesterOct 08.2008 — I think I'm visualizing what you're after, but any chance you could provide a screenshot or some sample css of what you already have developed?
Copy linkTweet thisAlerts:
@mrblobbyauthorOct 08.2008 — Sure, here's the best i've been able to come up with in terms of css and an image of what it should look like.

Cheers!

[upl-file uuid=3debf6ef-9d18-4358-b4db-45ae82626d0d size=19kB]sink.zip[/upl-file]
Copy linkTweet thisAlerts:
@mrblobbyauthorOct 10.2008 — Having spent some more time on it myself and no response I take it that means not possible - at least not in pure css. Anyone know if there's a sink function in css 3? Could be very interesting!
Copy linkTweet thisAlerts:
@NatdizzleOct 11.2008 — so your problem is:

your floating element overlaps your content? try this:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
*
{
padding: 0;
margin: 0;
}

#wrapper
{
width: 500px;
margin: 1% auto;
border: 1px solid green;
float:left;

}

#sinkThis
{


width: 250px;
padding: 10px;
border: 1px solid red;
background: #DDD;
float:right;
}

#all
{
margin:0 auto;
width:500px;
}

p { padding: 0.5em 0; }
ul { list-style-type: none;}

</style>

</head>

<body>

<div id="all">

<div id="wrapper">

<div id="text">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet.
</p>

<p>
Consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute <div id="sinkThis">

<h1>Lorem ipsum</h1>

<ul>
<li>consectetur</li>
<li>elit</li>
<li>sed</li>
<li>do</li>
<li>eiusmod</li>
</ul>

</div>
<!-- END SINK THIS -->

</div>
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.

</p>





</div>
<!-- END TEXT -->

</div>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@mrblobbyauthorOct 11.2008 — thanks natdizzle, that was actually the first thing I tried. Only problem is that the floated box is planted in the middle of the markup rather than at the very beginning or end.

For the project I'm working on all content is generated dynamically meaning there's no telling how long or short it'll be. It'd take a pretty complicated back-end solution to get the box in exactly the right place in the markup.
Copy linkTweet thisAlerts:
@NatdizzleOct 11.2008 — well then, sounds like a table would be better then a div in this situation.. try this:

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table width="350" border="0" cellpadding="1" cellspacing="1">
<tr>
<td valign="bottom">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps

over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the

lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. e lazy

dog.
<table border="0" align="right" cellpadding="10" cellspacing="10" bgcolor="#cccccc">
<tr>
<td nowrap>image here<br>
<br>
</td>
</tr>
</table>
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </td>
</tr>
</table>
</body>
</html>
[/CODE]
×

Success!

Help @mrblobby 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,
)...