Dreamwidth Faux Tables - Muselist/CR Table Edition

<div style="text-align: center">
    <div style="width: 600px; margin: 0 auto; text-align: left">
        <div style="clear: both; padding-bottom: 10px;">
            <img style="float: left; margin-right: 10px; margin-bottom: 10px; border: 10px #000 solid" alt="" src="http://www.dreamwidth.org/userpic/877418/139417" /><p style="margin: 0; font-size: 1.5em; text-align: right; font-style: italic; font-family: Georgia, serif;">heading here.</p>
            <p>This is a basic example of how you would make a two-column character info widget thing, with a picture, name, and info.</p>
        </div>
        <div style="clear:both; padding-bottom: 10px;">
            <div style="float: left; text-align: center">
                <img style="margin-right: 10px; margin-bottom: 10px; border: 10px #000 solid" alt="" src="http://www.dreamwidth.org/userpic/877832/139417" /><br />&hearts; &hearts; &hearts; &hearts;
            </div>
            <p style="margin: 0; font-size: 1.5em; text-align: right; font-style: italic; font-family: Georgia, serif;">but what if I want CR chart symbols?</p>
            <p>Funny you should ask that!  In that case, take the &quot;float&quot; property off of the image, and wrap it with a div tag with the style property 'float: left' or 'float: right'.  You can add a line break after the image, and then put your CR symbols underneath, also inside the div wrapper.</p><p>If your text is long, you may want to add 'width: 100px' to the div tag, too.</p>
        </div>
        <div style="clear: both; padding-bottom: 10px;">
            <img style="float: right; margin-left: 10px; margin-bottom: 10px; border: 10px #000 solid" alt="" src="http://www.dreamwidth.org/userpic/1020060/139417" /><p style="margin: 0; font-size: 1.5em; text-align: left; font-style: italic; font-family: Georgia, serif;">can I right-align this?</p><p>WHY YES YOU CAN.</p>
        </div>
        <div style="clear: both; padding-bottom: 10px;">
            <img style="float: right; margin-left: 10px; margin-bottom: 10px; border: 10px #000 solid" alt="" src="http://www.dreamwidth.org/userpic/1020071/139417" /><p style="margin: 0; font-size: 1.5em; text-align: left; font-style: italic; font-family: Georgia, serif; background-color: #000; color: #FFF; padding: 3px 5px;">how do I shot customizing?</p>
            <p>Oh gosh, there are so many ways you can do so! If you are not familiar with CSS, I direct you to the <a href="http://w3schools.com/css/">W3Schools CSS Tutorial</a>, which will help you in that regard.</p>
        </div>
    </div>
</div>