What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

Question

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

I am looking for a way to have my images wrap with text align in this specific layout:

<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 attempted to use the following code:

< DIV style="text-align:justify; text-justify:newspapers; padding:10px; font-size:1ุpx" > text text text text ....

but it didn't produce the desired result, instead showing 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)

Is there a method I can implement that doesn't involve manually adjusting the alignment? Since all images and text on my website will be dynamically fetched from the database.

html css image alignment word-wrap

Answer 1

Answer №1

Implement the Float property to position an image next to text

For example:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 

<img src="some.jpg" style="float:left">

Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. 

</p>

Answer 2

Implement the Float property to position an image next to text

For example:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. 

<img src="some.jpg" style="float:left">

Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. 

</p>

Answer 3

Answer №2

To position the floated box, apply margin-top.

Answer 4

To position the floated box, apply margin-top.

Answer 5

Answer №3

To align an image, use the align property in the img tag like this:

<img src="" alt="" align="left" />

However, the alignment of the image depends on where the img tag is positioned within the HTML.

Visit this link for more information on aligning images with HTML.

Answer 6

To align an image, use the align property in the img tag like this:

<img src="" alt="" align="left" />

However, the alignment of the image depends on where the img tag is positioned within the HTML.

Visit this link for more information on aligning images with HTML.

Answer 7

Answer №4

Utilizing a WordPress loop, I incorporated the "more tag" within my post content to easily float elements around as needed. To ensure proper formatting, I applied the wpauto filter to remove unnecessary tags from WordPress.

My CSS file includes:

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;
}

I configured index.php to be served from a subdirectory of the blog:

<?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>

It's important to use the "more tag" inside your post to achieve the desired effect. For a live preview, visit Floating around

Answer 8

Utilizing a WordPress loop, I incorporated the "more tag" within my post content to easily float elements around as needed. To ensure proper formatting, I applied the wpauto filter to remove unnecessary tags from WordPress.

My CSS file includes:

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;
}

I configured index.php to be served from a subdirectory of the blog:

<?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>

It's important to use the "more tag" inside your post to achieve the desired effect. For a live preview, visit Floating around

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting a problem with the transition of the hamburger menu icon in SC

Django CSS graphical interface for selecting styles

Having difficulty including the Column Name in the Jqgrid footer for sum calculation

How can the table header be displayed in a Vue JS application after receiving the server response?

Is there a way to utilize either css3 or css in order to change the icon displayed on a button

The page refreshes when the anchor element is clicked

Chrome is having trouble displaying Roboto font correctly

Showcase JSON data within a designated div

Discover how to access and manipulate JSON files in an Angular application using

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

Wrapbootstrap offers dynamic design options for Java-based web applications

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

JS Nav Dots are not activating the Active Class

Transition effects should be applied solely to the foreground text color, not to the background image

Show ng-message when email is invalid in Angular Material without using ng-pattern

What could be the reason for lxml not being able to locate this class?

Is it possible to showcase a dropdown list within a constantly changing table?

When incorporating Transify, don't forget to apply the border-radius property to enhance

Unable to assign to 'disabled' as it is not recognized as a valid attribute for 'app-button'

Discover the elusive tag that holds the specified text