Tips for wrapping a div element around another div at the top left corner

I am working with a particular layout.

<div class="comment">
<div class="leftpart">
</div>
<div class="rightpart">
</div>
</div>

When viewing on a desktop, I maintain the original styling where each div is in its own section and nothing is floating inside.

However, on mobile devices, I would like the leftpart to be positioned at the top left of the comment with the right part wrapping around it on the right side, creating a specific structure as follows:

|-------| Right div |
|Left   | right div |
|  div  | right div |
|<auto->| right div |
|-------| right div |
|right div this div |
|<--- 100% width--->|

Is there a way to achieve this responsive layout without making any changes to the existing HTML code?

htmlcss

Answer №1

To manipulate the position of an element on one side, you can utilize the float CSS property. If you float the .leftpart to the left, it will stay in that position and cause the remaining content in the .comment div to wrap around it.

I created a demonstration here: http://jsfiddle.net/yourusername/examplelink/

Does this meet your requirements?

Here is the HTML snippet:

<div class="comment">
    <div class="leftpart"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut neque lacus, imperdiet vitae condimentum a, aliquam ut ante. Vivamus nulla quam, rutrum sit amet augue a, semper gravida eros. Nulla sit amet fermentum est, eget lobortis dui. Cras ut pretium justo. Nunc tortor risus, vulputate nec accumsan id, fermentum vulputate felis. Suspendisse mi quam, molestie sit amet pellentesque lobortis, placerat vel nisi. Ut scelerisque lacus magna, quis volutpat purus vulputate at. Sed volutpat risus sit amet lectus sollicitudin porta. Aenean tempus quis est vitae pretium.</p>
</div>

And the corresponding CSS code:

.comment {
    width:300px;
    padding:5px;
    background:#f00;
}
.leftpart {
    width:150px;
    height:250px;
    margin:0 10px 10px 0;
    background:#0f0;
    float:left;
}

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

Creating a dynamic HTML table using Vue 3

My table is not showing the data I'm fetching from my API. Even though I can see the data in my console.log, it's not populating the table. Could there be an issue with how I'm calling the data to display in the table? <template> < ...

javascripthtmlvue.jsvue-componentvuejs3

In IE9/10, the absolutely positioned pseudo element within a table cell does not fully overlay its parent

My layout includes nested div elements displayed as a table and table-cell, with each cell containing an absolutely positioned :before element that covers the entire cell. While this setup works perfectly in most browsers, I am facing an issue in IE9, 10, ...

htmlcssinternet-explorer

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...

htmlcss

Tips for displaying a div near the cursor's location when hovering in React JS

Looking for a way to show a hidden div at cursor position when hovering on Text item1 or item2. Check out the sample GIF animation in this Link My attempt using Jquery code inside React resulted in an error: $(".text-item").mouseenter(function ( ...

javascripthtmlreactjshoveronhover

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Issue: I am struggling to display the overlay when hovering over the circle element, rather than just the image itself. I have attempted to achieve this using CSS, but can't seem to make it work as intended. Any guidance and examples using JavaScript ...

javascriptjqueryhtmlcss

Is there a way to personalize the link in a Cognito confirmation email?

Users who register through my application will receive an email from Cognito containing a verification link. AWS Cognito offers a template ({## text ##}) that will be converted into a link, such as <a href='link-to-confirm'> text </a> ...

htmlamazon-web-servicesemailamazon-cognito

Flexbox grid implementation for a stylish Bootstrap 4 masonry layout

Can a masonry column layout be achieved using the flexbox grid provided by Bootstrap 4? It appears that all the columns have the same height. ...

cssflexboxbootstrap-4css-multicolumn-layout

What is the best way to align this image in the center?

I've been struggling with this problem for a while now and can't seem to find a solution. I need to center align this image within the form, but everything I've tried so far has been unsuccessful. It may seem like I'm providing too much ...

htmlcss

What is the method for incorporating text below font icons?

Having a bit of trouble here with my code snippet featuring 'font awesome' icons in circles. I'm looking to add text beneath each icon, but the alignment within the circle is proving to be a challenge. Check out the code in this link to see ...

htmlcss

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

csshtmlhtml5-canvasobject-fit

What is the best way to transmit the "theme" property to "Components" within a next.js application?

I'm currently working on a next.js app and dealing with the _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme } from '@arwes/design' import { ThemeProvider, Global ...

cssreactjsnext.jscomponentsreact-props

Mastering the Art of Customizing Styling in Ant Design

I'm currently working with a table from Ant Design, but I'm facing an issue where the padding or margin applied by the Ant Design CSS is preventing the table from expanding on the left side. The table has an inline CSS of table layout: auto which ...

cssreactjsant-design-pro

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

jqueryajaxhtmlhtml5-video

Guide on retrieving inline style that has been overridden by CSS using JavaScript

<div style="background: url(http://www.example.com/image.jpg) center center/cover;"> This specific background image defined inline is being replaced by a rule in an external stylesheet: div { background-image: none !important; } Here's my q ...

javascriptjqueryhtmlcss

Utilizing Semantic HTML to Showcase a Product Comparison

As I prepare to showcase various products on a website for customers to choose from, each with its own name, description, and list of pros and cons compared to other products, I find myself unsure about the best way to structure the HTML. While headings a ...

html

Several bootstrap dropdown menus - issue with menu not closing when switching between them

Below are the script and style includes that I am using: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script& ...

cssbootstrap-4

The art of website creation: incorporating images into the background and using image tracing techniques

Trying to figure out where to find a solution for this. I had the idea of using a semi-transparent Photoshop design as a background and building on top of it, almost like tracing over it. This way, aligning things would be much easier. I remember Microsoft ...

htmlcssimagetrace

What is the definition of "top of the page" within a PHP document?

One source claimed that ob_start() should be placed at the top of the page, while another insisted that session_start() should take precedence. I also came across a guide stating that header() belongs at the beginning of the page. Additionally, I read th ...

phphtml

Preload-webpack-plugin does not support pre-fetching files

I have a query about prefetching and preloading content. In my vue app, I noticed that after building, I have duplicate files loaded in my dist/index.html file. Here is an example: Additionally, the "scripts" are not being preloaded/prefetched as expec ...

javascripthtmlvue.jswebpackvue-cli

Incorporating React into an already existing webpage and accessing URL parameters within a .js file

Following the official guidelines: To include React in a website, visit https://reactjs.org/docs/add-react-to-a-website.html I have created a file named test.html with the following content: <!DOCTYPE html> <html> <head> < ...

javascripthtmlreactjs