I want my image wrapping with text align like this
<html>
text text text text text <br>
text text text text text <br>
______________ text text text <br>
image | text text text <br>
image | text text text <br>
image | text text text <br>
___________| text text text (end)
</html>
I've tried this < DIV style="text-align:justify; text-justify:newspapers; padding:10px; font-size:1ุpx" > text text text text ....
but the result comes like this
______________ <br>
image | text text text text<br>
image | text text text text<br>
image | text text text text<br>
____________| text text text text<br>
text text text text text text
text text text text text text (end)
What should I do without manual putting ? (like align text first , then image and final , text) because all images and texts of my website will be fetched from the database.
use Float propert in image and write text normally
Eg
<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text
<img src="some.jpg" style="float:left">
some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</p>
Use margin-top
on the floated box.
Use the property align om the image tag ie, <img src="" alt="" align="left" />
But still i depends on where the img tag is placed in the html..
http://www.w3schools.com/tags/att_img_align.asp
I did this inside a wordpress loop, making use of the "more tag" in my post. as the tag divides the content it is easy to make the float around whatever you like. In my case it is the posts title and excerpt.
I did make use of the wpauto filter, for kicking the formatting tags, coming from wordpress.
My css file looks like:
body {
width: 100%;
height: 100%;
background-color: #ff5800;
}
#page {
width: 45%;
min-width: 230px;
background-color: #fff;
border: 1px solid white;
}
.content{
margin:10px;
background-color: #ff5800;
text-align: justify;
padding: 6px;
}
.title{
font-family: Freestyle Script;
color: black;
background-color: #fff;
min-width: 200px;
width: 75%;
font-size: 3em;
line-height: 50px;
vertical-align: middle;
float:left;
padding-right: 10px;
padding-top: 12px;
text-align: center;
margin-left: -6px;
margin-right: 6px;
}
.excerpt{
font-family: Freestyle Script;
color: rgba(0,0,0,0.7);
background-color: #fff;
min-width: 200px;
width: 75%;
font-size: 2.2em;
line-height: 32px;
float:left;
clear: both;
margin-left: -6px;
padding-right: 10px;
padding-bottom: 12px;
text-align: center;margin-right: 6px;
}
And i let this index.php be served out of a blogs subdirectory:
<?php
// get the blog content
define('WP_USE_THEMES', false);
require('../wp-blog-header.php');
query_posts('showposts=1' );
remove_filter('the_excerpt', 'wpautop');
remove_filter('term_description','wpautop');
remove_filter('the_content','wpautop');
function remove_images( $content ) {
$postOutput = preg_replace('/<img[^>]+./','', $content);
return $postOutput;
}
add_filter( 'the_content', 'remove_images', 100 );
?>
<?php while (have_posts()): the_post();
// split content at the more tag and return an array
function split_content() {
global $more;
$more = true;
$content = preg_split('/<span id="more-\d+"><\/span>/i', get_the_content('more'));
for($c = 0, $csize = count($content); $c < $csize; $c++) {
$content[$c] = apply_filters('the_content', $content[$c]);
}
return $content;
}
?>
<div id="page">
<div class="content">
<?php
// the_content();
// split content into array
$content = split_content();
// output first content section in column1
echo array_shift($content);
?>
// the object where the float happens
<div class="title"><?php the_title(); ?></div>
<div class="excerpt"><?php the_excerpt(); ?></div>
// you wont recognize a gap inbetween the splittet surounding
<?php
$link = get_permalink();
// output remaining content sections in column2
echo implode($content), ' <a href="', ($link), '">to the mainsite...</a>';
?>
<?php endwhile; ?>
</div>
</div>
</div>
Remember making use of the "more tag" inside your post, or the effect won't work. Good chances of a live preview is here: Floating around