Question

I’m developing a theme for WordPress.

As usual, there are the main page (index.php or home.php) with post summary and single.php file to display a certain post.

On the main page, the image alignment works as follow:

When I resize the page…

Inside single.php, it shows so:

I’m using this stylesheet:

/* Images */

.alignright {
    float:right;
    margin: 0 0 10px 20px;
}
.alignleft {
    float:left;
    margin: 0 20px 10px 0;
}
.aligncenter {
    display: block;
    margin: 0 auto 1px auto;
    clear: both;
}

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 12px;
    font-style: italic;
    line-height: 20px;
    padding: 0 5px;
    margin: 5px 0;
}

How can I fix these problems?
Best regards, Vi.

Note: code of post body is:

<article class="post-9 post type-post status-publish format-standard hentry category-uncategorized tag-ipsum tag-lorem tag-smashing tag-sticky" id="post-9">

    <!-- Display the Post's content in a div box. -->
    <div class="entry">
        <div id="attachment_10" class="wp-caption alignright" style="width: 253px"><a href="http://localhost/~vdenotaris/wordpress/?attachment_id=10" rel="attachment wp-att-10"><img class="size-medium wp-image-10" alt="Smashing Pumpkins" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/SP-Poster-243x300.jpg" width="243" height="300" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla  a sollicitudin nunc.</p></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla a sollicitudin nunc. <ins datetime="2012-12-19T17:23:48+00:00">Donec diam sem, porta id facilisis sit amet</ins>, auctor et justo. Mauris sapien urna, imperdiet imperdiet pharetra in, tempus id augue. Sed vitae leo purus. Donec consectetur porta leo vitae luctus. Sed sed mollis nulla.</p>
        <p>Praesent venenatis gravida pellentesque. Pellentesque sit amet orci sem, vitae gravida massa. Maecenas suscipit volutpat felis. Proin placerat est at ipsum fermentum vulputate.</p>
        <p>In ac erat lacus, ac congue urna. Nunc egestas luctus orci, ut elementum neque gravida vel. Vivamus blandit nunc vitae mauris convallis ac euismod felis ultricies. Phasellus ac ligula lorem, in adipiscing velit. Aliquam auctor ultricies est, vitae condimentum tellus consequat eget.</p>
        <div id="attachment_34" class="wp-caption alignleft" style="width: 250px"><a href="http://localhost/~vdenotaris/wordpress/?attachment_id=34" rel="attachment wp-att-34"><img class="size-medium wp-image-34 " alt="Benuimaru" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/Benimaru-Nikaido-240x300.jpg" width="240" height="300" /></a><p class="wp-caption-text">Benimaru Nikaido</p></div>
        <p>Nulla tempor, ante pulvinar vehicula faucibus, turpis mi pellentesque est, eget egestas lectus nulla vel nisl. Curabitur in turpis id eros ultrices gravida. Nam vel mauris in nibh blandit facilisis et ut dui. Donec in dignissim diam. Maecenas aliquam porttitor sapien, at tempus mauris tincidunt ut. Donec ut lectus id ante fermentum pretium. Curabitur auctor orci eu magna ultrices auctor. Etiam placerat, magna nec ultricies convallis, elit turpis mattis felis, ut dapibus lorem orci in enim. Fusce ipsum felis, commodo et posuere quis, commodo ut lacus. Pellentesque tristique augue varius arcu blandit mollis. Donec aliquam purus vitae augue vehicula placerat. Aenean libero nulla, rutrum in volutpat id, viverra id nunc.</p>
        <ul>
        <li>Quisque auctor consequat sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
        <li>Nullam luctus placerat lorem ornare volutpat. Integer <code>euismod magna</code> a neque fringilla eget mollis orci tristique.</li>
        </ul>
        <pre>Etiam sagittis augue vitae nunc imperdiet ut vehicula diam condimentum. Etiam non massa libero. Nam eget mi felis, nec dapibus neque. Cras viverra eleifend cursus. Aliquam sagittis auctor accumsan. Vivamus tincidunt, metus a varius condimentum, nisl erat commodo libero, et faucibus urna dolor eget nisi. Cras mi lectus, dictum sed volutpat eu, laoreet non mi. Aliquam dolor odio, malesuada sed volutpat et, facilisis sit amet eros.</pre>
        <p>Aenean hendrerit feugiat leo, eget sollicitudin mauris pretium non. Suspendisse potenti. Quisque eget nunc magna. Proin lectus dolor, consequat et vulputate id, vehicula id velit. Cras at elit id turpis luctus pretium sed eu ante.<del> Nunc rutrum pulvinar dapibus. Mauris nisl mauris, porttitor in pulvinar nec, auctor ac felis.</del> Aliquam malesuada purus sed augue condimentum et lacinia turpis porttitor. Donec tempor aliquet ligula, elementum facilisis est congue eget.</p>
        <blockquote><p>Nullam dapibus aliquet sem, vel mollis elit sagittis vel. Etiam quis leo ante, ut ultricies orci.</p></blockquote>
        <p>Mauris eget ipsum orci, et euismod tortor. Integer gravida justo nisl, in dictum eros. Maecenas<strong> venenatis erat eu tortor consequat porttitor eu et lectus</strong>. Maecenas volutpat nibh quis nisl tempor quis faucibus enim rhoncus. Vestibulum placerat, dolor in faucibus lacinia, augue odio rhoncus justo, sed facilisis lectus nulla eget tortor. Donec vitae purus nulla. Quisque ut tellus quis turpis fermentum bibendum. <a title="Sample" href="http://sample">Mauris ullamcorper, massa in suscipit luctus, metus dui auctor est, et mattis dolor tortor quis elit.</a> Nulla felis massa, auctor vel adipiscing malesuada, tempor a velit. Sed tincidunt congue turpis eget pharetra.</p>
    </div>

</article>

Answer 1

The only solution that I’ve found is the follow:

article .entry ul {
    margin: 10px 0 10px 2px;
}

article .entry ul > li {
    margin: 5px 0;
    list-style-position: inside;
}

/* Images */

.alignright {
    display: inline;
    float: right;
    margin: 0 0 10px 20px;
}

.alignleft {
    display: inline;
    float: left;
    margin: 0 20px 10px 0;
}

.aligncenter {
    display: block;
    margin: 0 auto 1px auto;
    clear: both;
}

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 12px;
    font-style: italic;
    line-height: 20px;
    padding: 0 5px;
    margin: 5px 0;
}

And there is the result:

That isn’t the best technique there can possibly be, but the result may be considered acceptable (I think).