Text wrapping a floated element

HTML & CSS
1

On this page:
http://boxer.webventions.com/Portfolio

Does anyone have any idea as to how to make the arrows in boxes text wrap at the bottom-right of the text.

Thanks E

2

You could use :after to make the space but ie7 and under don’t support it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box {
    width:250px;
    height:200px;
    float:left;
    border:1px solid #ccc;
    background:#f2f2f2;
    margin:10px;
    display:inline;
}
p {
    margin:0 0 10px;
}
p.arrow {
    clear:both;
    float:right;
    text-align:center;
    font-weight:bold;
    line-height:15px;
    height:15px;
    width:15px;
    overflow:hidden;
    border:1px solid red;
    font-wight:bold;
    font-size:15px;
    margin:-27px 3px 0 0;/* drag arrrow up one line */
    background:#ffffcc;
    position:relative;
}
.box p:after {/* dummy element to preserve space to stop overlap*/
    content:" ";
        display:inline-block;
    width:15px;
    height:15px;
    overflow:hidden;
        background:green;/* for testing*/
}
</style>
</head>
<body>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p class="arrow">></p>
</div>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. </p>
    <p class="arrow">></p>
</div>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac.Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et et et et et </p>
    <p class="arrow">></p>
</div>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac </p>
    <p class="arrow">></p>
</div>
</body>
</html>

Alternatively for IE just add some padding right to the p element and then pull the arrow in to the padding. It will mean its offset a little but “hey” you can’t have everything :slight_smile:

3

Paul, neat! I didn’t think of a negative margin.
This site has a cms so adding the space holder isn’t really practical.
I’ve been trying to figure out how to add space to the last line in the div with css but I can’t think of any. Any ideas?

Maybe I can figure out some way of doing it with jquery.

E

4

They seem to be at the right already or did you mean something else.?

5

If you wanted the arrow to the right of the current line then you could float it immediately after the inline content but only good browsers would keep it in line with the text.

Therefore you could make sure the arrow is on a new line and then drag it back upwards but preserve some space in the line above to stop overlap.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box {
    width:250px;
    height:200px;
    float:left;
    border:1px solid #ccc;
    background:#f2f2f2;
    margin:10px;
    display:inline;
}
p {
    margin:0 0 10px;
}
p.arrow {
    clear:both;
    float:right;
    text-align:center;
    font-weight:bold;
    line-height:15px;
    height:15px;
    width:15px;
    overflow:hidden;
    border:1px solid red;
    font-wight:bold;
    font-size:15px;
    margin:-27px 3px 0 0;/* drag arrrow up one line */
    background:#ffffcc;
    position:relative;
}
.box b {/* dummy element to preserve space to stop overlap*/
    display:inline-block;
    width:15px;
    height:15px;
    overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<b></b></p>
    <p class="arrow">></p>
</div>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac.<b></b> </p>
    <p class="arrow">></p>
</div>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac.Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et<b></b> </p>
    <p class="arrow">></p>
</div>
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. Quisque ac ligula lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac<b></b> </p>
    <p class="arrow">></p>
</div>
</body>
</html>

Is that what you meant.