Encircle the text within intersecting divs

I am facing an issue with my main div that contains some text and 2 other overlapping divs. The text in the main div is getting overlapped by the other two divs. I need help to make the text in the main div wrap around the overlapping divs.

It may sound silly, but I would appreciate any assistance on this matter.

.project1,
.project2 {
  position: absolute;
  background-color: #88c1dc;
  width: 40%;
  height: 50px;
  z-index: 11;
  border-radius: 10px;
}

.project1 {
  top: 460px;
}

.project2 {
  top: 540px;
}

.project_title_heading {
  padding-top: 8px;
  padding-left: 20px;
}
<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0; position: absolute; z-index: 10; left: 29%; padding: 30px; height: 80vh; border-radius: 20px;">
      <p style="text-align: justify; font-weight: 500; font-size: 18px;">Lorem ipsum text here...</p>
    </div>
    <div class="project1">
      <h3 class="project_title_heading"><a href="">Project 1</a>
      </h3>
    </div>
    <div class="project2">
      <h3 class="project_title_heading"><a href="">Project 2</a></h3>
    </div>
  </div>

</section>

view image description

javascripthtmlcssbootstrap-4frontend

Answer №1

Have you attempted to nest the sub-divs within the main div? Give this a try:

<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0; position: absolute; z-index: 10; left: 29%; padding: 30px; height: 80vh; border-radius: 20px;">
      <p style="text-align: justify; font-weight: 500; font-size: 18px;">Lorem ipsum text here...</p>
      
      <!--New placement-->
      <div class="project1">
          <h3 class="project_title_heading"><a href="">Project 1</a></h3>
      </div>
      <div class="project2">
          <h3 class="project_title_heading"><a href="">Project 2</a></h3>
      </div>
      <!--New placement-->

    </div>
  </div>

Answer №2

It appears that you are looking to have the children of the container displayed side by side, possibly using a float layout.

#portfolio>.container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
 }
 #portfolio>.container>*{
   width:30%;
 }



<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0;">
      <p style="text-align: justify; font-weight: 500; font-size: 18px;">Lorem ipsum text here...</p>
    </div>
    <div class="project1">
      <h3 class="project_title_heading"><a href="">Project 1</a>
      </h3>
    </div>
    <div class="project2">
      <h3 class="project_title_heading"><a href="">Project 2</a></h3>
    </div>
  </div>

</section>

If this is indeed your goal, the provided CSS adjustments should achieve the desired layout effect. Remember to use external styles instead of inline styling whenever possible.

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

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

I have integrated the ngx-quill editor into my Angular project as the rich text editor. I plan to save the generated HTML in a database and display it on various browsers using innerHTML. Since the styling is done through a class attribute that references ...

cssangularwysiwygquillngx-quill

Navigating to another division segment within an HTML document using the arrow keys: a guide

There are three main div boxes colored pink, red, and green.  I would like to enable movement of all segments using arrow keys. When the page is loaded, the active box will initially be in the 'pink' segment at the center. We can then navigate ...

javascripthtmlbootstrap-5

How can I display a clicked-on div while hiding all other divs using jQuery?

I want to create a website where a button can show and hide a specific div, but my challenge is; How can I ensure that clicking on one button hides all other divs? Here is the JavaScript code: function showHide(divId){ var theDiv = document.getEleme ...

javascriptjqueryhtmlcssonclick

Transform the Angular function into a factory and take advantage of caching

My query differs from others with a similar title. I am attempting to transform a function into a factory in order to share data across controllers, but unlike my other factories, this one is not functioning as expected. I have successfully implemented ot ...

javascriptangularjs

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

htmlcss

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

I recently encountered a scenario where I needed to select a video on one page and have it automatically play on another page without any redirection. The initial page displays a list of videos for selection, like this: FirstPage Once a video is chosen on ...

javascriptphphtmlvideo

What is the best approach for retrieving the value of a deeply nested JSON object?

Currently, I am developing an application in JavaScript and I have encountered a JSON object. Here is a simplified version of the JSON object: { "data": [ "user": { "pictures"{ "sizes"[ 0: { "link": "http://www" ...

javascriptjson

Using Javascript to Access ASMX Web Services

I am looking to make a call to a webservice using JavaScript. Here is the code I have written: var method="GetStock"; var url = "http://www.examplewebsite.com/ServiceGetStock.asmx"; $.ajax({ type: "POST", url: url + "/GetStock ...

javascriptjqueryasp.netweb-servicesasmx

Add a space following each individual character using CSS styling

Imagine we start with this HTML: <h2>TITLE</h2> Can CSS alone transform it into something like this: <h2>T I T L E</h2> The goal is to justify the letters within the title over a specified width without relying on server-side so ...

htmlcss

`Is JSON causing strange caching problems?`

When I retrieve data from my PHP, everything seems to be working fine. However, the issue arises when var myData is getting cached and only updates after refreshing the page twice... On Firebug, I can see that the post updates are coming through, but when ...

javascriptjqueryjsonajax

Ways to send information from Vue instance to nested components

Currently, I am fetching data using AJAX from the Vue instance and trying to pass it onto different components. As I delve deeper into learning Vue.js, I can't help but notice that the documentation seems a bit scattered... This snippet showcases wha ...

javascriptvue.jsfrontend

Question about using React, NPM, Vite, Babel, and Node.js together

I want to confirm my understanding. So, if I decide to create a react 'app' and incorporate babel for jsx support. Then, I opt for vite for enhanced development runtime and packaging. Lastly, I utilize node.js to execute my code. To sum it up, ...

javascriptreactjsnode.jsbabeljsvite

Is it possible to create a special case for the beforeunload function?

Is there a way to exclude a specific URL or form button from the beforeunload event in JavaScript? I want to exempt them, not as error handling exceptions but to customize how they interact with this event. Here is the relevant JavaScript code: if(loggedi ...

javascriptjqueryhtmlhttpse-commerce

How can I customize the connector for Ant Design Steps?

Does anyone know how to adjust the color and width of the connector line in Ant Design's Steps component? I've tried inspecting it but can't find a way to style it separately using className. If you have any tips, they would be greatly appr ...

cssreactjsuser-interfaceantd

A script in PHP or JavaScript that dynamically generates two dual drop-down menus to assist with data selection

I have experience with php scripting, but I am facing challenges when trying to combine it with JavaScript. The issue arises when I have a form that includes dropdown menus for categories and subcategories. When a category is selected, the options in the s ...

javascriptphpajax

"Underscores in an array of primary keys serve as markers for

I want to filter a list of objects using underscore based on their primary key being included in a specific array of primary keys. list = [object{pk: 1}, object{pk: 2}, object{pk: 3}] primary_key_list = [1,2] The desired outcome is to return [object{pk: ...

javascriptunderscore.js

Prevent the routing on page reload in AngularJS

My route provider setup looks like this: app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix(''); $routeProvider .when('/', { templateUrl: 'login.html', controller: 'loginCtrl&a ...

htmlangularjsangular-routingroute-provider

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

javascripthtmlcsstwitter-bootstrap

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

How can I ensure the Jquery datepicker functions correctly?

I've been attempting to create a jsp page with some Jquery functionalities. Unfortunately, despite my best efforts, I am unable to make it work. I have downloaded jquery1.7.1 and jquery-ui1.8.17 (non-mini), renamed them to jquery171.js and jquery-ui. ...

javascriptjquery