Creating a CSS layout that spans a single element across multiple divs

As a newcomer to the world of Html & CSS, I have a seemingly simple question that has been eluding me: How can you make an html element(child div, text, etc.) span across multiple divs using only CSS & Html(with no Javascript/JS)? Currently, I am working on creating a basic event calendar(using HTML+CSS) and focusing on handling multi-day events.

html, body {
  left: 0;
  margin: 0;
  background:white;
  height:100%;
}

b{
  font-family:calibri;
  padding-left:10px;
}

#container{
  margin: 0 auto;
  width:300px;
  padding-top:50px;
}

.colorone{
  background:#FFEB3B;
  width:150px;
  height: 150px;
  float:left;
}
.colortwo{
  width:150px;
  height: 150px;
  background:#8BC34A;
  overflow:hidden;
}
<html>
  <head></head>
  <body>
<div id="container">
  <div class="colorone"><b>4</b>
   </div>
    
  <div class="colortwo"><b>5</b>
   </div>
    </div>  
    
  </body>
    
</html>

Intended outcome: https://i.sstatic.net/l1Lyv.png

The blue div/rectangle should be able to extend over more than two parent divs if necessary.

I've scoured online resources and StackOverflow for answers but haven't found a satisfactory solution yet. Any assistance would be highly appreciated.

htmlcss

Answer №1

In this example, I made some modifications to your code. I included the position property in the container and the third element, and also set the z-index to 2 for the div with the class .colorthree.

var width = 0,
    container = $('#container');

container.children('div').each(function(){
    if(!$(this).hasClass('colorthree')) {
    width += $(this).width();
  }
});
container.width(width);
$('.colorthree').width(width-20);
html, body {
left: 0;
  margin: 0;
  background:white;
  height:100%;
}

b{
  font-family:calibri;
  padding-left:10px;
}

#container{
  margin: 20px auto;
  width:300px;
  height: 150px;
  position:relative;
  white-space: nowrap;
}

.colorone, .colortwo, .colorfour {
  width:150px;
  height: 150px;
  background:#8BC34A;
  overflow:hidden;
  float:left;
}
.colorone{
  background:#FFEB3B;
}
.colorfour {
  background: red;
}
.colorthree {
  z-index: 2;
  top: 20px;
  left: 10px;
  position: absolute;
  width:90%;
  height: 40px;
  background:blue;
  overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="container">
      <div class="colorone"><b>1</b></div> 
      <div class="colortwo"><b>2</b></div>
      <div class="colorfour"><b>4</b></div>
      <div class="colorthree"><b>3</b></div>
    </div>

Answer №2

To achieve this effect, you can utilize the position: absolute CSS property.

No JavaScript is required for this, as it can be implemented using only HTML and CSS.

html,
body {
  left: 0;
  margin: 0;
  background: white;
  height: 100%;
}

b {
  font-family: calibri;
  padding-left: 10px;
}

#container {
  margin: 0 auto;
  width: 300px;
  padding-top: 50px;
  position: relative;
}

.colorone {
  background: #FFEB3B;
  width: 150px;
  height: 150px;
  float: left;
}

.colortwo {
  width: 150px;
  height: 150px;
  background: #8BC34A;
  overflow: hidden;
}

.colorthree {
  background-color: blue;
  display: block;
  position: absolute;
  width: calc(100% - 50px);
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  line-height: 50px;
}
<html>

<head></head>

<body>
  <div id="container">
    <span class="colorthree">I'm Span!</span>
    <div class="colorone"><b>4</b>
    </div>

    <div class="colortwo"><b>5</b>
    </div>
  </div>

</body>

</html>

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

Tips for ensuring that all children within a flex-container have equal heights

I seem to be facing an issue with this problem. My goal is to ensure that all the child divs within a flex container have the same height as the tallest child div, which in this case is 100px. Additionally, I want them to be aligned at the center. I&apos ...

htmlcssflexbox

Tips on adjusting the text color of the material radio button

Looking for some assistance here. I'm working with a small piece of code that combines Material UI and Angular. I have a radio button group where the text color is not changing, despite setting the SCSS value to #262D34. <mat-radio-group aria-label ...

cssangularmaterial-ui

Exploring the Difference Between :nth-child(even|odd) and :nth-child(int) CSS Selectors

Encountering a challenge with the CSS :nth-child pseudo selector and suspecting that something crucial has been overlooked. index.html <html> <head>...</head> <body> <div class='selector'>first</di ...

htmlcsscss-selectors

Pug conditional elements not styling with CSS

Currently immersed in the world of Pug, node.js, and express as I build a web application. Facing hurdles when trying to style elements within Pug conditionals using CSS. For instance, consider this Pug snippet: div(id='outside') if authoris ...

javascripthtmlcssexpresspug

JavaScript for rotating an element upon button click

My webpage design <div id="yabanner"> <img src="img/ok.jpg"> </div> <button>Click Me</button> <button>Click Me</button> <button>Click Me</button> My script code var button = document.getElementsBy ...

javascripthtmldom

Increase the size of the logo in the navbar without causing any distortion to the other elements

I am currently facing an issue with my logo placement in the header section of my website. The header consists of a background image with a navbar and logo embedded within it. HTML <div class="header"> <div class="container"> < ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Ways to obtain jquery object for replaced DOM element

Is there a way to select the new content after using the replaceWith function in my plugin? I want to chain my plugin for the new content. $.fn.customPlugin = function() { this.replaceWith('<div>New Content</div>'); }; So, ideal ...

jqueryhtml

What could be causing my React components to not display my CSS styling properly?

If you're developing a React application and integrating CSS for components, ensure that you have included the style-loader and css-loader in your webpack configuration as shown below: module.exports = { mode: 'development', entry: &apo ...

javascripthtmlcssreactjs

Tips for positioning input fields and labels in both horizontal and vertical alignment

Below is the HTML code, and I want the tags to look like this: label1: input1 label2: input2 label3: input3 Instead, it currently looks like this: label1: input1 How can I modify the HTML to achieve the desired format? HTML: <div class=" ...

javascripthtmlangulartypescript

I'm currently in the process of designing unique tabs, however, the content within the tabs

My current project involves creating tabs where all the tab content is inside one div with a position:relative, and each content div has been given a position:absolute. The issue I'm facing is that when the position is set to absolute, the content ov ...

htmlcsscss-position

To insert a new row into a table with an onClick function, along with removing this attribute from all other rows except for the newly added one

I recently created a piece of code that enables the addition of a new row and removes an (onClick) attribute when clicking on an existing row within a table. <table style="vertical-align:middle;margin:20px;" id="table_insert"> <tr id="tra" > ...

javascriptjqueryhtmldom

How can I make a bootstrap container maximize the available viewport space?

I've come across several similar posts, but none seem to address my particular dilemma. My challenge lies in presenting a table at the end of a bootstrap grid: <div class="container-fluid"> <!-- Various rows with different size ...

htmlcssbootstrap-4blazor

Margin of Contents in a Table

I have created a table within a box on my webpage. The default setting centers the table inside the box, but I want it to align with the bottom border of the box instead. Each row in the table contains two cells, each cell displaying a picture that I would ...

csshtml-tablemargin

dotdotdot.js is only functional once the window has been resized

For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here. An odd issue arises when the page is refreshed, as the ellipsis does not appear until I res ...

javascriptjqueryhtmlcssjquery-plugins

"Showing Images in a Slider: A Step-by-Step Guide

I'm facing an issue with displaying images in a slider. The problem is that the images are stacking vertically instead of appearing side by side in a slideshow. Below is how I have structured my code: @if (Model.Photos.Count > 0) { <div s ...

javascripthtmlcssbootstrap-4

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Seeking assistance with this issue: I am working on a page that includes radio buttons: <label>Delivery type:</label> <input type="radio" name="delivery" value="7" class="delivery-item" id="del-type-7" onclick=""><label class="label" ...

javascriptjqueryhtml

unable to decrease the gap between the rows of the table

I'm currently developing an application that involves a table with rows and columns, along with a checkbox container arranged as shown in the image below: https://i.stack.imgur.com/QoVrg.png One issue I'm facing is getting the letters A, B, C, ...

htmlcsshtml-table

Can an image be positioned so that it extends beyond the edge of the window without impacting the scroll bars?

I'm trying to position an image on the side of the screen that only shows up on large widescreen monitors. Currently, I have this tag in place which positions it perfectly: <img src="image.png" style="position: absolute; left: 1400px ...

htmlcssimage

Navbar optimization by eliminating unnecessary whitespace at the end

I'm working on a navigation bar that has four links. I need to get rid of the extra space to the left of "Projects" and to the right of "Contact." It seems like this spacing is part of the unordered list structure, rather than padding or margin. Chec ...

cssnavbarnav

The browser is able to cache the selected state of a select tag and will disregard any instances where selected=

When rendering a drop down box, I include a currently selected value using selected="true". <select id="dropDown"> <option selected="true" value="1">value2</option> <option value="2">value3</option> <option va ...

htmlbrowser