I'm having difficulty justifying the text to the left of my images in WordPress. www.obsessionfitness.com In the post editor it shows the image floating to the right of the text but the live site shows the image on the left. Any thoughts are appreciated.
Create a css float like: .right_img { position: relative; float: right; margin: 0 10px 0 10px; } Code (markup): Use it like this: <img class="right_img" src="http://obsessionfitness.com/wp-content/uploads/2007/12/41a-od-xql_aa280_.jpg" alt="perfectpushup" /> Code (markup):
Thanks so much. I'm not very experienced with CSS. Does it matter where I add the code? Here's the complete layout.css (assuming that's the file to edit). html, body { margin: 0; padding: 0; text-align: center; } h1,h2,h3 { margin: 0; padding: 0; } #wrapper { width: 788px; text-align: left; margin: auto; } #header, #navigation_bar, #content, #blog, #footer { width: 788px; display: block; position: relative; float: left; } #footer { margin: 6px 0; color: #775; font-size: 11px; clear: both; } .footer_mod { display: block; width: 520px; float: left; margin: 0 50px 0 0px; float: left; } #f2 { width: 130px; margin: 0; } .footer_mod a { color: #775; } #blog { min-height: 400px; padding-bottom: 14px; float: left; } #content { margin: 6px 0 0 0; } #header { height: 62px; } #blogtitle { position: absolute; top: 15px; left: 18px; } #navigation_bar { height: 38px; border-bottom: 1px solid #a2b47a; margin: 6px 0 0 0; position: relative; overflow: hidden; } #navigation_bar ul { padding: 0; margin: 0 0 0 6px; } #navigation_bar ul li { position: relative; top: 10px; display: inline; height: 38px; padding: 10px 14px 10px 14px; border-right: 1px solid #9fb178; list-style: none; } #navigation_bar ul li ul { display: inline; margin: 0; padding: 0; text-indent: 0; } #navigation_bar ul li ul li { top: 0; border-right: none; border-left: 1px solid #9fb178; padding-right: 0; margin-left: 5px; } #search_bar { position: absolute; right: 10px; top: 0px; } #searchsubmit { position: relative; top: 6px; margin-left: 4px; } .postmeta { margin: 6px 0 12px 0; } .blogpost { width: 586px; float: left; } .postdate { width: 470px; } .postheader, .postbody, .subpostmeta, #postcomments{ margin: 0 0 0 90px; width: 470px; position: relative; } .pageheader, .pagebody { margin: 0 0 0 30px; width: 470px; } .postheader { margin-right: 40px; } .subpostmeta { padding: 8px 0; } .postdate { position: absolute; top: 24px; left: 30px; width: 30px; } #postcommentscount { position: relative; top: 32px; left: 30px; width: 40px; height: 37px; clear: left; background: url(images/commentbubble.gif) top left no-repeat; } #sidebar { float: right; margin-top: 20px; width: 182px; } .postbody img { float: left; margin: 5px 20px 20px 0; } .footer_mod ul li { list-style: none; margin: 0; padding: 5px 0; border-bottom: 1px solid #313129; } .footer_mod ul { margin: 2px 0 0 0; padding: 2px 0; } #footer_meta { margin: 8px 0; line-height: 16px; } #footer_meta h3 { margin: 0 0 5px 0; } .pagebody .navigation { margin: 12px 0; } .navigation { display: block; margin: 12px 0; width: 300px; } #archivebody { margin-left: 80px; margin-top: 15px; } ul#searchresults { margin: 5px 300px 15px 30px; padding: 0; border-top: 1px solid #efeed6; } ul#searchresults li { list-style: none; margin: 0; padding: 5px 0; border-bottom: 1px solid #efeed6; } ul#searchresults li a { font-weight: bold; } ul#searchresults li a:hover { color: #663a2e; } ul#searchresults li small{ font-size: 10px; margin-left: 5px; text-transform: uppercase; } a.more-link { margin-top: 10px; display: block; padding: 0 0 0px 18px; background: url(images/crosspattern.gif) top left no-repeat; }
Where is this "layout.css" file? As I know, you should go to your theme directory and pick up the style.css file to edit. It doesn't matter where you put the new code, but do NOT put it in to existing braces. Just append it to the end and it will work.
if layout.css is the main css file for that theme (will be located at public_html/wp_content/themes/your_theme/layout.css) then it can be placed anywhere within that file.