0

I want to apply css only to the text. I have this code:

<div id='post-body'>
Lorem ipsum dolor set
<img src='any URL'>
</div>

And this picture shows how I want it to look like

There should be a padding to text only and the image should have full width.

Is there any way to do that using javascript or jquery?

Improve this question
2
  • There is given css solutions, is that ok or it has to be script? Commented Nov 1, 2015 at 12:27
  • 2
    To get the best answer, please add as much relevant info as possible to your question, such as you made a comment using Blogger, and maybe, if an alternative platform would be of interest, add that too. Commented Nov 2, 2015 at 8:15

3 Answers 3

Reset to default
2

display:flex; could help.

#post-body {
  display:flex;
  flex-direction:column-reverse;
  padding:15px;
  }
img {
  margin:-15px -15px 15px;
<div id='post-body'>
Lorem ipsum dolor set
<img src='http://dummyimage.com/100x100/E73B3B/E73B3B'>
</div>

but obviously, if HTML structure cannot be touch, javascript will be needed to re order html and wrap text to highlight it

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

There should be a padding on the text only as well.
@LGSon done, but my answsers was a way , not the job done :)
2

I don't know why you have so many -1...

Simple question, simple answer:

If you cannot edit you html you can use this simple hack:

#post-body {
    position: relative;
    width: 200px;
    border: 1px solid red;
    padding: 20px;
    /*Depending of your image height: */
    padding-top: 150px;
}

#post-body img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

http://jsfiddle.net/thibaudsowa/Lrb8tmwt/

Improve this answer

Comments

0

This is how you do it. 

<div id="post-body"><!--remove padding tag from post-body-->
<div style="mytext">Lorem ipsum dolar set</div>
<img src="any url">
</div>

In head section or just above this code, add the following code: (as you said, you are using blogger)

 <style>
    .mytext
    {
       padding:12px;
    }
  </style>

Apply "mytext" style to every text you want to have padding.

Another simple solution is don't use blogger. I used it initially but stopped it because of these reasons only. With Blogger, you can't get enough customization and you are under "Google" and dependent on that. If you want to make your blog unique, a much better alternative is to use WordPress which is open source, independent and has more customization.

Though it will be difficult for you to move from blogger to word press but it will help in future. Bloggers/blogspots were used initially but now technology has moved and we have much better alternative. The future of blogger will be dark as everyone is now moving to Word Press (which enjoys the open-source brand). Check this out

Improve this answer

4 Comments

I am using blogger I need to this for all post
Edited the answer. Please check it now.
plus 1 for your question. Dont know why so many downvotes...it is not a silly question what I think. You must be beginner...must be some trolls.
This doesn't answer the question, and as well adds html which were asked not to, so please update or remove it to avoid getting down votes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.