Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How To Span Element Across Multiple Divs CSS

Post a Comment
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.) acr

Solution 1:

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>

Solution 2:

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>

Post a Comment for "How To Span Element Across Multiple Divs CSS"