I was spending some time on a question when I came up with a funny solution but not really finalized.

See the Fiddle and try to erase the <br/> tag.

The idea is too get the same effect (red div displayed) but without using this solution relatively horrible.

So here is my question : How do I simulate <br/> tags with CSS or eventually Js ?

Just some more difficulty : You can't touch the wrapper.

Here's 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/><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%;
}

I was spending some time on a question when I came up with a funny solution but not really finalized.

See the Fiddle and try to erase the <br/> tag.

The idea is too get the same effect (red div displayed) but without using this solution relatively horrible.

So here is my question : How do I simulate <br/> tags with CSS or eventually Js ?

Just some more difficulty : You can't touch the wrapper.

Here's 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/><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%;
}

• javascript
• html
• css

6 Answers 6

You can stretch .box with position absolute since it's relative to the parent. This way you can be sure that it takes entire space of the parent container.

.wrapper {
    width:300px;
    display:block;
    position:relative;
    overflow:hidden;
    background-color:gray;
}
.widget {
    width:300px;
    height:300px;
    display:block;
    position:relative;
    background-color:graeen;
}
.box {
    background-color:red;
    visibility:visible;
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}
.box-wrap {
    overflow: hidden;
    height: 0;
    padding-bottom: 60%;
}
.box-wrap div {
    max-width: 100%;
}

<div class="wrapper">
    <p>Some text and descriptions</p>
    <div class="widget box-wrap">
        <div class="box"></div>
    </div>
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

You can safely remove <br /> and use padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. For example using 'padding-top':

.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;
  padding-top: 180px;/*add padding top*/
}
.box-wrap {
  overflow: hidden;
  height: 0;
  padding-bottom: 60%;
}
.box-wrap div {
  max-width: 100%;
}

<div class="wrapper">
  <p>Some text and descriptions</p>
  <div class="widget box-wrap">
    <div class="box"></div>
  </div>
  <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

Reference:

Box model

Use absolute positioning? It will stretch to the full height and width of the container:

.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;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box-wrap {
  overflow: hidden;
  height: 0;
  padding-bottom: 60%;
}
.box-wrap div {
  max-width: 100%;
}

<div class="wrapper">
  <p>Some text and descriptions</p>
  <div class="widget box-wrap">
    <div class="box"></div>
  </div>
  <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>

Just apply the height to be 100% in .box and remove the height: 0 from .box-wrap or you may remove all styles of .box-wrap which is really unnecessarily causing the problem because of height: 0 and overflow: hidden:

.box {
    background-color:red;
    visibility:visible;
    height: 100%;
}

updated fiddle

You can use just one <br> tag and then use line-height in css.

HTML:

<p>
Lorem ipsum <br> Another line
</p>

CSS:

p {
    line-height: 40px;
}

Use min-height in .box css like:

.box {
    background-color:red;
    visibility:visible;
    min-height:100px;
}