Menu
EDIT: I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
I'm a beginner to HTML&CSS and have a pretty straightforward question, but i just can't seem to find the answer: How can you make a child div overflow to the next row(of divs, etc.) if there isn't enough space on the screen(or on the row of divs) to fit the whole child div? And could you do it with only HTML&CSS(if possible) at most a bit of JavaScript? Here's what i mean should happen:
As you see, because the blue child div overflows to the second row of divs because it is to large to fit in just the first row. Currently, if my blue div is too large, it will just overflow to the side(run code below).
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;
border: 1px;
position:relative;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
.colorthree{
left: 10px;
position: absolute;
width: 150%;
height: 20px;
background:blue;
overflow:hidden;
} <html>
<body>
<div id="container">
<div class="colorone">
<b>4</b>
<div class="colorthree"></div>
</div>
<div class="colortwo"><b>5</b></div>
<div class="colortwo" style="float:left"><b>6</b></div>
<div class="colorone"><b>7</b></div>
</div>
</body>
</html>I've searched and researched online & on Stack Overflow but I still can't seem to find the answer, and barely any questions on it, so any help would be greatly appreciated.
792
Here is a very crazy idea relying on inline element and linear-gradient.
#container {
margin: 20px auto;
width: 450px;
display:flex;
flex-wrap:wrap;
position:relative;
}
#container > * {
width:33.33%;
height: 150px;
background: #FFEB3B;
}
#container > *:nth-child(odd){
background: #8BC34A;
}
#container > span {
/* cover all the container */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/* */
background:none!important;
line-height:150px; /* same as height here */
font-size: 130px; /* a big font-size to cover more area */
overflow:hidden; /* hide extra overflow of the "phantom" text */
text-align:justify; /* we justify the "phantom" text to span until the end */
}
/* the below inline element will wrap different lines and will cover all the grid
and since the line-height = height, we will have a perfect illusion of a continuous line
over the different cells */
#container > span span {
background:
linear-gradient(var(--c,blue) 0 0) /* the color */
calc(var(--left)*150px) var(--top)/ /* the position */
calc(var(--width)*150px) var(--height) /* the size */
no-repeat;
}
#container > span span:before {
content:". . . . . . . . . ."; /* phantom text to fill the inline element*/
font-size: 300px; /* big enough to avoid having a long phantom text but not too much to make sure there is at least two characters per line to trigger the justify */
line-height:0; /* we obey the to above line-height */
visibility:hidden; /* we don't need to see the text */
}<div id="container">
<!-- calender element --->
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
<div><b>6</b></div>
<div><b>7</b></div>
<div><b>8</b></div>
<div><b>9</b></div>
<!-- line elements -->
<span style="--left:0;--top:20px;--height:20px;--width:4"><span></span></span>
<span style="--left:2;--top:40px;--height:40px;--width:4;--c:red;"><span></span></span>
<span style="--left:4;--top:100px;--height:10px;--width:3;--c:black"><span></span></span>
<span style="--left:0;--top:90%;--height:20px;--width:9;--c:purple"><span></span></span>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
