James,
You’ll need to get a book on this subject or learn online if you really want to get a handle on CSS. Try anything from Zeldman or Eric Meyer. First off though, the site you want to emulate doesn’t utilize CSS properly, so I wouldn’t of necessity follow what they’ve done–maybe just the look–or their stylesheet–but not their markup (I really haven’t looked at thier styles). Notice I said “utilize.” If they really were using CSS properly they wouldn’t have marked their page up the way they did. A margin is what you need, my man.
1.) You read right–margin not padding. Padding goes between the content and a border–if you had one. The margin is on the outside of the border (again, if you have a border). Learn the “box model” and you’ll be on your way. The site you gave is using the align="right" to put the photo to the right. Don’t do it that way.
For a photo that floats right with the text wrapping around it, do this in your markup (before a paragraph or heading, etc.):
<div class="photoright"><img src="image.jpg" alt="whatever" title="whatever" /></div>
In your stylesheet you will make this declaration:
.photoright {
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666; /* if a border is desired */
}
Adjust the margins as you see fit so that the text flows around the photo as you see fit. Make the border any color you’d like. #666 is the shorthand for #666666.
Sure, you can float just the img and declare all images as block elements (a good idea anyway) but with the photo in a div you have more “hooks” as it were for styling and you can also put a caption with the photo and the whole thing floats as a unit. If you wanted to use padding and gave the background a color, padding would allow the background to show through. Best way to learn is to experiment. Try an editor that allows you to see your changes in real time too. You can use Firefox and use the “Developer Tools” plugin that’s on their site for real-time CSS editing if you wish. You can even edit other sites in real-time.
There is no need for absolute positioning, etc.
Note: that the photoright declaration is a class. You mentioned that you’d want all your photos to be right-aligned. This will “float” all your photos to the right. Being a “class” you can use this same <div> class as many times as you’d like on the page. That’s the power of CSS. You don’t want to do what the above gentleman wrote, and set up images into the background of divs every cotten-picken time you post a photo. This would mean an edit to the stylesheet just to post a photo–absurd!
About the second line of text thing… I assume you want a sub-heading? Then an <h2> would be in order. Style the headings (h1-h6) any way you’d like and you’re good to go.
Hope this helps.
–Dave K.
