Write Left or Right of Pictures
This should answer the following questions:
"How do I write next to a picture?"
"How do I write beside my picture?"
"How do I write to the left of a picture?"
"How do I write to the right of a picture?"
etc.
Here's the code to write to the left of a picture:
<div style="float:left;text-align:left;width:80px;padding:10px;">
Write about your picture here.
</div>
<img src="http://sitdownsellup.com/pj/red-x.png" style="width:100px;height:200px;" />
</div>
Looks like:
And here's the code to write to the right of a picture:
<div style="float:right;text-align:left;width:80px;padding:10px;">
Write about your picture here.
</div>
<img src="http://sitdownsellup.com/pj/red-x.png" style="width:100px;height:200px;" />
</div>
Looks like:
Now let's break it apart line by line:
This is the outside box around your picture and your text. If you want it thinner or wider you change the width. 200px is 200 pixels. If you don't want the border you can remove it, like this:
I just put the border there so you can see that you need this "outside" box to put your picture and text in. Now, realize your picture and text needs to fit inside this big box, so if your picture is 100 pixels wide and you plan to have 100 pixels of text, that's 200 pixels total. You need to do some basic math to figure this out.
So now you're thinking, what if my picture is really big and it won't fit in my "About Me" section, or wherever you're trying to put it. No problem, you can change the size of your picture, I'll explain that.
Next:
Write about your picture here.
</div>
This is the box that holds your text. If it "floats" to the right your writing goes on the right. If it floats to the left your writing goes to the left of the picture. Simple, right? Text-align is how the text is "justified" inside your text box. If you're bored, change it to "right" and you'll see that the words are pulled to the right of your text box, which might look cool depending on what you're trying to say.
The "width:80px;" is the tricky part. Pay attention to this. Our outer box is 200px, right? And our picture is 100px, so that leaves 100px for our text, right? Well, yes, but it doesn't look so good when your text is pushed right up against your picture. It needs a little room to breathe. So we make it 80px, and add "padding". Padding:10px; adds space all the way around the inside of your text box. That's 10px to the left of the text, 80px for the picture, and 10px to the right of the text, that's 100px total! It's basic math, got it?
If you want to be more specific you can actually do this:
Which is the same as:
Or you can do this too:
The first number is the top, second number is right, then bottom, then left. It goes around clockwise.
Next is your picture:
Change the numbers to change the size of your picture. To change the picture you just change the URL of the picture, which in this case is: http://sitdownsellup.com/pj/red-x.png
To find the URL of a picture you can usually "right-click" it and click "Copy Image Location" and that will save the URL to your clipboard, then when you are ready to paste the URL into your code you press "Control-V".
If you can't find good picture hosting, follow me on Twitter and I'll see what I can do.
Write about your picture here.
what if we don't want there to be a box around it?
because I want it in my about me next to where I wrote. I don't want it to describe the picture a box around it,or whatever. Please explain this to where I can understand it-or just give me an easier code...
I'm so frustrated! I don't understand the codeeee.
Someone help me.
How to I write BESIDE an image?
yeah, it didnt work. :/
an easier way to do this code is;
<img src="URL HERE" text align="left">
replace it with right and your writing will be on the right. its alot simpler and easier to remember
if im making my own layout how do i add text as in a poem as a background? thanks in advanced :)
this doesnt work..on mines it goes blank! >:[
Becki, find the "div" that the text is in and use this style="text-align:right;"
If you don't have a div to work with, make one, but make sure it's big enough, use the "width:" and "height:" styles. A div will shrink to fit whatever you put inside it (unless you make it bigger) so if your div is very small, your text won't move to the right, it will be trapped inside your little div, and your little div will probably be on the left. You could "float" a little div to the right, but that's more complicated to explain.
thiz thing didnt work for meh!
how do i move just my writing to the right without it being next to a picture?
Ran, I'm glad it helped!
This is an amazing article for people like me who are just starting out on blogging. Thank you!