How to Span Element Across Multiple Divs CSS

user_12186419 0
Viewed 999

I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple 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>

Desired result: enter image description here

The blue div/rectangle should also be able to span more than two parent divs if wanted.

I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.

css html
2 Answers

Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .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>

user_25783840

You can do that with position: absolute

No javascript needed, only with 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>

user_117925770
Related