While pondering a question, I stumbled upon a humorous solution that wasn't quite finalized.
Check out the Fiddle and attempt to remove the <br/> tag.
The challenge is to achieve the same effect (red div displayed) without resorting to this rather crude solution.
So, my question is: How can I replicate <br/> tags using CSS or potentially JavaScript?
Just to add a bit more complexity: You are not allowed to modify the wrapper.
Here is the HTML code:
<div class="wrapper">
<p>Some text and descriptions</p>
<div class="widget box-wrap">
<div class="box"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
<p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>
Here's the CSS:
.wrapper {
width:300px;
display:block;
position:relative;
overflow:hidden;
background-color:gray;
}
.widget {
width:300px;
height:300px;
display:block;
position:relative;
background-color:green;
}
.box {
background-color:red;
visibility:visible;
}
.box-wrap {
overflow: hidden;
height: 0;
padding-bottom: 60%;
}
.box-wrap div {
max-width: 100%;
}