CODEWITHSUNDEEP
htmlcssline-breaks
John Merchant
John Merchant

Reputation: 49

What is causing the line break?

I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?

Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?

Upvotes: 0

Views: 337

Answers (3)

stephenmurdoch
stephenmurdoch

Reputation: 34613

if your thumbnails are all the same width, then you can do this:

article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }

a few points:

  • WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
  • the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
  • there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..

anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article

Upvotes: 0

Riz
Riz

Reputation: 10246

Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.

Upvotes: 0

Liam
Liam

Reputation: 1058

Simply add left float to the image, and give it some space to the right and bottom, as below:

img.postthumb {
    float: left;
    margin: 0 10px 10px 0;
}

Upvotes: 2

Related Questions