CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
sharataka
sharataka

Reputation: 5132

How do I get text to wrap next to an image instead of beneath it?

I'm using twitter bootstrap and also it's responsive design. When I shrink my browser (Chrome) or view the below code in my iPhone browser, the text all appears on one line. However, when I increase the font size to 20px, the text wraps underneath the image. What can I do in order to have the the text (when it is 2 lines long) appear to the right of the icon/image instead of wrapping beneath it?

            <div class = 'row'>
                <img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px;">
                   <span style = "font-size:18px;">The Hobbit: Kingdoms of Middle-earth<br /></span>
            </div>

Upvotes: 1

Views: 229

Answers (3)

fakemeta
fakemeta

Reputation: 1008

<div class="row">
<img src="http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style="width:60px;float:left;">
<div style="float:left;">The Hobbit: Kingdoms of Middle-earth<br/></div>
</div>

Upvotes: 0

Nik Drosakis
Nik Drosakis

Reputation: 2348

<div class = 'row'>
 <img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px; float:left; padding-bottom:30px;">
<span style = "font-size:20px; vertical-align:middle; line-height: 30px; ">The Hobbit: Kingdoms of Middle-earth<br /></span>
</div>

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

I would do the same as Nik but a bit differently:

http://jsfiddle.net/gkxz4/

<div class = 'row'>
<div class="col_image">    
<img src = "http://a286.phobos.apple.com/us/r1000/113/Purple2/v4/a2/b1/40/a2b14050-c4be-4243-2cad-7dc1fcaec726/mzl.vkophohs.png" style = "width:60px;">
</div>
<div class="col_text">The Hobbit: Kingdoms of Middle-earth</div>
</div>

.row { width:400px; overflow:hidden; }
.col_image { float:left; width:60px; margin:0 20px 0 0; }
.col_text {float:left; width:320px; font-size:18px;}

Upvotes: 1

Related Questions