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

Is it impossible to use CSS for absolute positioning of text?

Legend click functionality works well in hiding the bars, but unfortunately, the data values in the charts.js are not being concealed as expected

A guide on integrating a data deletion feature in Angular applications

Footer not being pushed down by content in mobile view on page

Issues with rendering components using ReactJS are causing problems with <p/> and <br/> tags not functioning as expected

Position the responsive carousel in the center

Hyperlinks are malfunctioning and the text cannot be highlighted

Including a JavaScript file in an HTML document initiates a server request, which can lead to potential errors

Several different forms are present on a single page, and the goal is to submit all of the data at

Retrieving Information from Website Components in JavaFX Web View

output a string from the write_html function in plotly

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

Using AJAX in JavaScript within an HTML document is a valuable skill to have

HTML5 canvas processing causing web worker to run out of memory

Pressing the reset button will restore the table to its original

what is the best way to change background image in media query for various screen sizes?

Conceal the overflow from absolutely positioned elements

Discrepancy in image dimensions between Android and iOS

What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Floating Feature on Vizio Intelligent Television App