I am facing an issue with a div containing two inner divs, which is currently structured as follows:
https://i.sstatic.net/jy8s6.png
However, when the second inner div has more content, it appears like this:
https://i.sstatic.net/ezvyU.png
Is there a way to achieve a layout similar to the following?
https://i.sstatic.net/GKkgh.png
The content within the second div consists of text only, and the text extends below the first inner div.
I'm not a big fan of using float, but it seems like it would do the job for you.
.floater {
background-color: cyan;
display: inline-block;
float: left;
margin: 0 20px 20px 0;
width: 40%;
}
.main {
background-color: yellow;
}<div class="floater">Morbi posuere elementum finibus. Donec tincidunt, arcu ac egestas ornare, nulla nulla ullamcorper arcu, sit amet consequat nunc quam ac justo. Nulla vestibulum cursus erat, vel aliquam lorem rhoncus vel. Praesent non dolor ut ligula scelerisque varius. Maecenas eu enim in enim dignissim suscipit. Duis aliquet scelerisque imperdiet. Cras ac convallis arcu, vel semper elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non mauris sed nibh egestas semper eget in odio. Suspendisse ornare ut enim at consequat. In fermentum libero augue, vitae auctor sem pellentesque ut. Nulla a erat porttitor, consequat neque eget, aliquet lectus. Sed hendrerit et lorem ut tempus. Donec placerat ipsum sit amet dui ullamcorper, sed semper quam dictum. Aliquam nunc magna, gravida et sagittis id, pretium et nisl. Cras mollis felis diam, non pellentesque orci cursus et. Quisque vestibulum tincidunt magna sit amet sodales. Aliquam aliquam nibh dolor, sed sodales odio convallis in. Cras dapibus aliquet finibus. Vivamus eu leo mattis, suscipit ex vitae, aliquet dolor.
Ut convallis, urna aliquet lobortis facilisis, sem justo varius ipsum, eu tincidunt augue purus varius libero. Sed mauris justo, ornare et fringilla a, tristique at sapien. Mauris bibendum iaculis risus, tincidunt euismod quam placerat volutpat. Maecenas interdum ornare nisl nec convallis. Pellentesque elit dui, viverra ac ipsum non, tempor interdum tortor. Aenean in pellentesque justo. Aenean sit amet rutrum lectus. Donec commodo fermentum nunc, et tempus enim iaculis vitae. Praesent venenatis vulputate scelerisque.
Vivamus auctor ex nec elit imperdiet, eget hendrerit lacus lacinia. Suspendisse consectetur quis arcu mollis aliquam. Maecenas condimentum arcu risus, eget gravida justo ultricies in. Maecenas pretium sem ante, ut tempor velit imperdiet non. Mauris cursus tortor eget ultricies aliquam. Vivamus lacinia efficitur quam et sollicitudin. Morbi pretium in eros nec egestas. Sed ut libero nec mi sollicitudin rhoncus ut a purus. Cras vitae iaculis purus. Nullam at rhoncus enim. Nunc sed vestibulum elit. Praesent volutpat neque nec congue egestas. Vestibulum sit amet porttitor massa, sit amet varius purus. Aliquam id maximus lorem.
Suspendisse sed nunc convallis, bibendum arcu a, fermentum nulla. Quisque eget lorem at dui tempus sodales nec ut arcu. Pellentesque sodales nunc ac massa tincidunt, a pretium purus condimentum. Aenean vitae bibendum mi. In interdum, lorem ac rhoncus ullamcorper, ligula nisl elementum turpis, ut ultricies massa sem eget libero. Etiam fermentum blandit nisl et volutpat. Sed molestie ante vitae leo pharetra volutpat. In at felis sem. Praesent eu nunc eu purus posuere tempus in ac est. Nullam quis arcu velit. Integer nec nulla sit amet velit cursus semper. Ut turpis arcu, fermentum a nisi non, feugiat molestie odio. Morbi et felis pulvinar, blandit nisl non, pellentesque tellus.
Praesent ac risus at turpis dignissim eleifend. Cras non magna facilisis nulla vulputate bibendum id et augue. Integer tempor eleifend suscipit. Mauris dolor arcu, consectetur in congue at, fringilla cursus nisi. Pellentesque vestibulum congue odio sed pretium. Proin ante justo, volutpat vitae pharetra in, porta non turpis. Morbi ut risus molestie, sagittis erat ut, facilisis mauris. Aenean ultrices sem non elit mollis, eu volutpat metus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque odio mi, auctor non turpis at, faucibus dapibus massa. Curabitur dapibus turpis malesuada vehicula dignissim. Nunc non mollis justo. In posuere faucibus sodales. Praesent accumsan leo at egestas sollicitudin.</div>One approach you can take is to use the float property like this:
float: left;
It's important to keep in mind that each div functions as a block element, and blocks cannot overlap each other unless one is nested within the other. To achieve the desired layout, consider placing a smaller div inside a larger div and then floating the smaller div accordingly.
To create the desired layout, make sure to specify a width (fixed or max-width) and apply a left float to the first div. Below is a basic example:
<div style="background-color: blue; padding: 10px;">
<div style="background-color: blue; color: white; float: left; margin-right: 20px; padding: 10px 20px 10px 10px; width: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet quam porta, porttitor leo sed.
</div>
<div style="background-color: red; color: white; padding: 10px; ">
Quisque erat mi, pretium ut nibh ut, vulputate sollicitudin leo. Quisque condimentum leo tortor, et vulputate justo aliquet convallis. Aliquam erat volutpat. Duis aliquam ligula velit, vulputate aliquam elit tincidunt at. Maecenas at turpis pretium, convallis lacus quis, efficitur ipsum. Quisque ullamcorper mauris et tortor laoreet rutrum. Sed tincidunt metus quis maximus interdum. Phasellus at sodales arcu, nec bibendum neque. Donec id posuere enim, pellentesque elementum augue. Donec venenatis libero sapien, a tempor dolor tristique ac.
</div>
</div>For more details on the float property, you can visit the following link on w3schools: https://www.w3schools.com/cssref/pr_class_float.asp
It is not feasible to make a div wrap around another div unless the text is wrapping around a div/img. The direct wrapping of one div around another div is not supported.
One alternative approach is to create a shape using CSS, although this method does not have support in Internet Explorer. You can learn more about shaping text around elements here: https://css-tricks.com/almanac/properties/s/shape-outside/
I'm in the process of creating a website that includes a login feature. The usernames and passwords are currently stored within the website files as .txt documents. I am aware that this method is not secure, but for the purpose of this project, I want ...
When creating a grid layout for a webpage, I opted to use Flexbox. My goal was to incorporate some automatic functionality so that additional grid boxes could be included without the need to manually add classes or styles in the HTML code. One particular f ...
Can anyone advise me on passing JavaScript string variables and displaying them in the URL? For instance, let's say the URL is "xyc.com". Upon populating a variable (a), I wish for that variable to appear in the address bar as URL = "xyc.com/?a=". Cur ...
I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...
html: <body> <div class="custom-div"><input type="button" id="x" name="button" value="Search" onclick="showUser()" class="button"/></div> <input type="image" name="button" value="Search" onclick="showUser()" class="bu ...
To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...
Currently, I am attempting to scrape job skills from the Wuzzuf website using the following code snippet: result = requests.get("https://wuzzuf.net/search/jobs/?q=data+analysis&a=navbl") src = result.content soup = BeautifulSoup(src, "lx ...
I am facing a challenge with my webpage where inline block divs are being appended each time a link is clicked, causing the total width to eventually go off the page (which is intentional). I would like to implement an animated scroll feature that automati ...
Having trouble parsing a JSON feed using jQuery and innerHTML, but for some reason it's not working as expected. No errors are being displayed in the console and the feed itself is functioning properly. Not quite sure why this issue is occurring. < ...
Hello, I have been looking for a way to create an overlay with a form that appears when a specific input field is clicked. I am trying to achieve this using React. Can someone please advise me on how to accomplish this? Here is my code import React, { Co ...
Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...
I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...
html, body { height: 100%; margin: 0px; } .container { display: flex; width: 100%; height: 100%; background-color: yellow; } .box { flex-shrink: 0; } <div> <div class="container"> <div class="box"&g ...
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...
Seeking assistance to run an AJAX call for a quick calculation in my django view and display the result within a span tag on my HTML page. New to Javascript, struggling with triggering my AJAX call. Below is my HTML and JS code: <input type="text" nam ...
I have an HTML input text and want to pass coordinates to create a marker on Google maps. Check out the code here: jsfiddle.net/#&togetherjs=r3M9Kp7ff7 What is the best way to transfer this data from HTML to JavaScript? <label for="latitude">L ...
I am working on creating a quiz example using Jquery, but I am facing some challenges when trying to manipulate CSS classes with hover in Jquery. .right{ background-color: white; } .wrong { background-color: white; } .right:hover { background-color ...
I'm currently developing a php script that collects and saves links in mysql. However, I've encountered an issue where the script sometimes captures multiple links for the same download, as shown below: http://www.fileserve.com/file/XXXXXX http: ...
Imagine a situation in which a user inputs a keyword into a text field. I am seeking a way to retrieve relevant data from Wikipedia that corresponds to the entered keyword. How can this be accomplished? <form method=POST action=someaction> ...
I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...