Placing a canvas alongside a block of text

I'm having some trouble getting my canvas to float to the right of a paragraph. I've been following guidelines for floating images, but it doesn't seem to be working as expected.

Here is what I have attempted so far:

CSS

.container
{
    overflow: hidden;
    width: 100%;
}
.container p
{
    display: block;
    width: 50%;
    margin: 0;
}
.container canvas
{
    margin: 0;
    float: right;
    border:0.2vw solid blue;
}

HTML

<div class="container">
    <p>Lorem ipsum dolor sit amet...</p>
    <canvas>Your browser does not support the canvas element.</canvas>
</div>
htmlcss

Answer №1

If you want to align the canvas to the right, you can create another div with a width of 50% and float it to the right. Alternatively, you can set the canvas to float:left while setting the container paragraph's width to 25% along with padding-right to adjust the spacing.

.container
{
    overflow: hidden;
    width: 100%;
}
.container p
{
    width: 25%;
    margin: 0;
    margin: 0;
    float: left;
    padding-right: 20px;
}
.container canvas
{
    margin: 0;
    float: left;
    border:0.2vw solid blue;
}
<div class="container">
    <p>Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet..Lorem ipsum dolor sit amet..Lorem ipsum dolor sit amet..Lorem ipsum dolor sit amet..</p>
    <canvas>Your browser does not support the canvas element.</canvas>
</div>

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

How do I incorporate a responsive image within a bootstrap grid while ensuring it fits correctly?

The code I wrote: <div class="row"> <div class="col-md-9"> <img src" link "> </div> <div class="col-md-3"> <form> </form> </div> ...

htmlcssbootstrap-4

Rails app automatically loading asset files

In the process of developing my Rails application with Twitter Bootstrap, I encountered an interesting situation. After adding a blank "custom.css" file to the "app/assets/stylesheets" folder, everything seemed normal. It wasn't until I customized the ...

htmlcssruby-on-railstwitter-bootstrap

Unusual activity observed in HTML5 contenteditable functionality

Within a list item, I have a span element. <ul> <li>text part 1 <span class="note">this is a note</span> text part 2 </li> <li>text part 3</li> </ul> When you double click on th ...

javascripthtml

Animating Text Around a Circle Using HTML5 Canvas

Can someone please help me figure out what is wrong with this code? It's not rotating as it should, and the text looks messed up. I've been trying to solve this problem for hours but can't seem to get it right. function showCircularNameRot ...

javascripthtmlcanvashtml5-canvas

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, inst ...

cssreactjs

Tips on automatically adjusting the height of a div that already has a specified height

Is there a way to make the header height adjust automatically when the window width is reduced, similar to the first picture shown below? Unfortunately, I am required to use a parent style that specifies the div height (height:90px) and I am unable to remo ...

htmlcss

Ways to make the height of two div elements the same using CSS

I need to ensure that the height of two div's is equal, with one stretching to match the height of the other if necessary. I am looking for a solution using only CSS. Here is the code I have so far (Fiddle Link): HTML: <div class="common"> ...

htmlcss

Restricting the Zoom Functionality in a Web-Based Project on a Touch-Enabled Display

I am currently working on a project that is web-based and runs on localhost. I need to prevent users from zooming in on the user interface. Is there a way to accomplish this using JavaScript? And can I achieve this restriction specifically on Google Chrome ...

javascripthtmlgoogle-chrome

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...

javascriptcsssassgulp

Is anyone utilizing PHP variables to control the title of the HTML and the ID of the body element?

I utilize PHP variables to store the title's value and the ID of the body. The latter is a method to show which section of the page the user is currently on (in this case, the "home" section). At the start of my index.php: <?php $title = "New ...

phphtmlvariables

The navigation menu refuses to remain fixed at the forefront of the screen

Creating a Navigation Menu in Java Script: $(function() { var nav = $('#nav'); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var sho ...

javascripthtmlcss

WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...

javascriptandroidhtmlcsswebview

How to activate a text-box or dropdown list in MVC using jQuery when a particular radio button is clicked

Need help with a jQuery task. I have three radio buttons and one dropdown list. The dropdown list should appear when the third radio button is clicked, otherwise it should be disabled. How can I set up a condition based on the 'id' property of th ...

javascriptjqueryhtmlasp.net-mvc

Delete a particular division within a row based on its unique identifier

I am currently working with Django and have integrated multiple Bootstrap cards into my page structure as shown below. I am attempting to delete a specific div element when clicking the 'X' button within an anchor tag. <row> <col-sm-3 ...

javascriptjqueryhtml

The div elements are constantly shifting positions when viewed in Internet Explorer

After completing my website and testing it across different browsers, I noticed an issue with IE. The contact div and navigation shift around the page in this browser specifically. Can anyone help me out with some code to fix this problem? Link to live ex ...

htmlcssinternet-explorer

Creating a Tic Tac Toe game using Javascript程序

As a beginner in programming, I am working on an assignment to create a Tic Tac Toe program using HTML and JavaScript. I found some code related to Tic Tac Toe on a website, but I am having trouble understanding how it works. Here is the code snippet: if ...

javascripthtmlcss

Custom Bootstrap 3 Panel Organization

I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...

csstwitter-bootstraplayoutpanel

What can you do with a 2D array and getElementsByTagName?

My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...

javascripthtmlgetelementsbytagname

Isotope animation glitches causing malfunction

I've been experimenting with CSS3 transitions on isotope items, but I'm encountering some strange behavior. My goal is to achieve a fading effect on the items, similar to this example: . Thank you in advance! Here's what I have so far: http ...

javascriptjquerycss

Make sure to include the target blank attribute in your custom PHP code for

Is there a way to open a link in a new window? <?php if(get_option_tree('rss')) { ?> <a href="<?php get_option_tree('rss',$theme_options,'true'); ?>" id="rss" title="RSS" class="tt_top"></a><?php } ...

phphtmlhyperlink