How do I stop text wrapping around an image using CSS style? I'm building a WordPress theme.?

Question

I would like to stop text flowing underneath the thumbnail image on this page (GIF) http://www.onepagereview.com/blog/wp-content/themes/Restaurant%20Review/images/working2.gif

Please help.

>> This is the CSS applied to the 'thumb'

.thumb
{
float: left;
margin-left:5px;
margin-top:4px;
margin-right:25px;
background-color: #fff;
white-space:nowrap;
}

>> This is the HTML (WordPress)

...etc

Thank you

3 answers

Hi there,

it will depend on how long your posts will be, if they are all going to be short like in the example screenshot pic you posted, then you can try adding a margin-bottom to the .thumb class, like:

.thumb
{
float: left;
margin-left:5px;
margin-top:4px;
margin-right:25px;
margin-bottom: 25px;
background-color: #fff;
white-space:nowrap;
}

but this won't work for very long posts, so you would have to either use tables or some other CSS trick

for example, if you set both .thumb and .post to float: left AND specify a width for both divs, that would work

.thumb
{
float: left;
width: 100px
}

.post
{
float: left;
width: 300px
}

If the image is off to a minimum of one fringe of the website: sure. via including align="left" or align="appropriate" to the image. If the image is placed interior the midsection... no longer with out CSS. If an internet site would not choose for to apply CSS, possibilities are high the CSS is in basic terms suitable to incorrectly, or the markup is incorrect.

You can't do that with CSS. You have to have a two-column table with image in one column and text in the other.

Answer 1

Hi there,

it will depend on how long your posts will be, if they are all going to be short like in the example screenshot pic you posted, then you can try adding a margin-bottom to the .thumb class, like:

.thumb
{
float: left;
margin-left:5px;
margin-top:4px;
margin-right:25px;
margin-bottom: 25px;
background-color: #fff;
white-space:nowrap;
}

but this won't work for very long posts, so you would have to either use tables or some other CSS trick

for example, if you set both .thumb and .post to float: left AND specify a width for both divs, that would work

.thumb
{
float: left;
width: 100px
}

.post
{
float: left;
width: 300px
}

Answer 2

If the image is off to a minimum of one fringe of the website: sure. via including align="left" or align="appropriate" to the image. If the image is placed interior the midsection... no longer with out CSS. If an internet site would not choose for to apply CSS, possibilities are high the CSS is in basic terms suitable to incorrectly, or the markup is incorrect.

Answer 3

You can't do that with CSS. You have to have a two-column table with image in one column and text in the other.