CODEWITHSUNDEEP
htmlcssimage
Michael Blake
Michael Blake

Reputation: 995

Text falling below image

Good Bad

I need this text to wrap, but I don't understand why it isn't. If it gets to long, it simply falls below the image.

<style>
.discussion {
width: 50%;
min-height: 100px;
margin: 0 auto;
}
.discussion img {
margin: 12.5px;
float: left;
}
.discussion a {
text-decoration: none;
margin-top: 12.5px;
display:inline-block;
}
#discussion_title {
font-size: 22px;
color: #3f3f3f;
margin-top: 5px;
}
</style>
<div class="discussion">
<img src="http://images.elephantjournal.com/wp-content/uploads/2013/01/mirror_cat-500x500.jpg" width="75" height="75" />
<div class="discussion_text">
    <a href="view-topic.php?tid=" id="discussion_title"> blah blah blah</a>
</div>
</div>

JSFiddle

Upvotes: 2

Views: 240

Answers (5)

Veer Shrivastav
Veer Shrivastav

Reputation: 5496

Try this:

.discussion img {
    margin: 12.5px;
    float: left;
    display:inline;
    width:10%; /* Whatever it should be*/
}
.discussion a {
    text-decoration: none;
    margin-top: 12.5px;
    float: right;
    display:inline-block;
}

Upvotes: 1

famousgarkin
famousgarkin

Reputation: 14116

It's caused by the .discussion a { display: inline-block; }, so you can either remove that or change it to .discussion a { display: block; } for text to flow around the image nicely, article-style.

http://jsfiddle.net/9aMxg/2/

Or you can add the following for discussion_text not to wrap, but it will stay in a column, not flow around the image:

.discussion_text {
    overflow: auto;
}

http://jsfiddle.net/MfadJ/

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15891

Don't use inline for a, that way, you will not be able to customize it any further as inline elements can not be styled easily and in very limited manner!

inline-block will make a only equal to width of the content .

Just amend this part and all is good

.discussion a {
        text-decoration: none;
        margin-top: 12.5px;
        display:block; //changed from inline-block
    }

demo

Also, you have used excess CSS to achieve your target, it can be trimmed down!

Upvotes: 0

Tushar
Tushar

Reputation: 4418

You can do it like this

Remove display: inline-block of .discussion a and add

.discussion_text {
  display: inline;
}

Upvotes: 1

Xlander
Xlander

Reputation: 1331

You have to put a float:left too on the discussion_text and make it have a fixed width.

Upvotes: 0

Related Questions