Designing an arrangement using JavaScript and CSS to encase text

Imagine you have an image positioned to the left using float:left;, with text flowing around it.

The solution seems simple enough:

<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>

However, the challenge arises when trying to create an outline that wraps around only the text and not the image. A typical outline on the text results in this:

What we really want is this:

Applying display:inline; to the <p> tag creates an outline on each line of text instead of enclosing the entire block of text within a boundary.

We're open to creative CSS3 or hardcore CSS/JS solutions...

javascriptcss

Answer №1

If you're looking to create a unique visual effect, consider moving the image upwards and towards the left to cover the standard border. To enhance the illusion, add a separate border around the image.

<section>
 <img src="image.jpg" style="float:left">
 <p>Lorem ipsum...</p>
</section>


section {
 border: 1px blue dotted;
}

img {
 background-color: white;
 border-right: 1px blue dotted;
 border-bottom: 1px blue dotted;
 margin: -1px 0 0 -1px;
 padding: 0 5px 10px 0;
}

Check out the demo here: http://jsfiddle.net/KW45t/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to modify the inner HTML of a recently added element?

<script> $(document).ready(function(){ $(this).on("click", "#add", function(){ var html = ' <div id="trav"><div class="adults"><p>Adults</p><div class="buttons&q ...

javascriptjquery

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

Looking to showcase socket io object values on the client side - here's how!

Hey there, I am looking to store userID, userName, and socketId in an array called users using objects. Here is how I plan to do it: var userInfo = new Object(); userInfo.userName = user.userName; userInfo.userId = user.userId; userInfo.socketId = socket. ...

javascriptnode.jssocket.io

Could someone share an instance of an AngularJS configuration that continuously checks for new data and automatically refreshes the user interface once the data is obtained?

Struggling to find a suitable example for this scenario. I am looking to create a chart directive that will be updated every minute by fetching data from a web service. Currently, I have a service that acts as a wrapper for the web service. My controller ...

javascriptangularjsangularjs-directive

Display JSON data in a dynamic d3.js visualization

Using d3.js, I have created a chart that displays weekly scores when hovering over the months. To view the chart, click here: https://jsfiddle.net/qp7L1hob/1/ In my database, I maintain a table called Table pointsScored where I keep records of employee s ...

javascriptphpsql-serverjsond3.js

jQuery still not running despite using .ready

I have been attempting to run some jQuery code on my HTML page. After doing some research, I learned that using .ready may be necessary to ensure the DOM is fully loaded before executing the script. Despite this, I am still having trouble getting the scrip ...

javascriptjquery

How does the single-threaded nature of Node.js handle an abundance of concurrent requests?

I'm currently delving into the world of nodejs, trying to wrap my head around its single-threaded nature. Here's a pondering I have: Let's say I implement a non-blocking method and we have 20000 concurrent requests flowing in. If one request ...

javascriptnode.jseventemittersingle-threaded

Node.js - Implementing URL Validation for User Input

I've been utilizing the node module 'request' to develop a job queue for retrieving HTML data from a URL entered by a user. Here's the current state of my code: var jobQueue = []; function processNextJob() { if (jobQueue.length &l ...

javascriptnode.jshttp

Having trouble getting the jQuery script to properly check file size in an HTML form before uploading?

I've created an HTML form with a jQuery script to verify the file size when the SAVE button is clicked. Despite my efforts, the check doesn't seem to be functioning properly in the HTML Form. Please assist me with this and thank you in advance ...

javascriptjqueryhtml

Tips for seamlessly embedding Youtube iframes within Angular2 components. Resolving issues with unsafe value errors

ERROR: There seems to be an issue in the ./HomeComponent class HomeComponent - inline template:23:84. It is caused by using an unsafe value in a resource URL context. About my homeData model { id: 1, title: '2017 Super Bowl', graphic: 'ht ...

javascriptangulariframeyoutube

"Unleash the power of the Web Audio API by releasing

Currently, I am utilizing the WEB Audio API within a Webapp to render an Audio Signal. However, I have encountered an issue where Chrome's RAM usage gradually increases as it loads an audio file every second. Unfortunately, I am unsure of how to relea ...

javascriptweb-applicationsweb-audio-api

Tips for integrating properties into the class in jQuery

My goal is to assign properties to a class and then inherit them into individual DIV IDs. However, something seems to be off with my code. What could it be? var startItem1X = randomRange(50,100); var startItem1Y = randomRange(50,100); var startItem2X = ra ...

jquerycss

Difficulty parsing data from a JSON file using JavaScript

My knowledge about AJAX and JSON is very limited. I am currently attempting to import the information from dealerData.json into my MVVM viewModel, however, 'data' keeps returning as undefined. $(function () { var object; $.ajax({ ...

javascriptjqueryajaxjsonmvvm

Build a bootstrap table with rounded corners

Currently, I am utilizing Bootstrap 5 and have the table code below: .reasonCode-table { padding: 8px; border-collapse: separate; } .reasonCode-table th { border: 2px solid #7a7878; padding: 8px; border-radius: 2px; border-collapse: collaps ...

htmlcssbootstrap-5

What is the efficient way to toggle localStorage based on checkbox selection using jquery?

I am looking to efficiently manage localStorage using checkboxes. When a checkbox is checked, I want to add the corresponding value to localStorage, and remove it when unchecked. var selectedModes = new Array(); $('.play_mode').on('click& ...

javascripthtmljquery

Simple steps to emphasize a table cell in Angular 2

Essentially, I have a table structured as shown below <table> <tr> <td>Date</td> <td>Time</td> <tr> <table> The goal is to make both the date and time clickable within this table. When clicking on the date, ...

htmlcssangulartypescript

Increase or decrease a variable by 1 using jQuery

There are simple plus and minus buttons on each side of an input field, as shown in the code below: <input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%" onclick="subst()" />  <input type="text" ...

javascriptphpjqueryhtml

Hovering over a table cell triggers a popup in Angular

Inserted a class into <td><span class="only-show-on-hover"></span></td> CSS code for the class td span.only-show-on-hover { visibility: hidden; } td:hover span.only-show-on-hover { visibility: visible; } Code for dialog box < ...

javascriptangulartypescriptbootstrap-4

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

My responsive CSS grid gallery is experiencing issues with vertical images disrupting the layout, as they appear at full size instead of remaining square like the others. How can I fix this problem? Thank you! Below is the code snippet: <div id=" ...

cssimagegrid

Troubleshooting: Issue with Vue component template iteration

What is causing the issue with iterating inside the component template in the code above? <!DOCTYPE html> <html> <head> <title>Exploring Vue components</title> <script src="https://cdn.jsdelivr.net/npm/vue"></s ...

javascriptvue.jsvuejs2