How to simulate multiple
tag with CSS

Question

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%;
}

Bhojendra Rauniyar · Answer 1 · 2015-07-24T08:47:32.087

2

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

edited Jul 24 '15 at 08:47

answered Jul 24 '15 at 08:31

Bhojendra Rauniyar

83,432
35
168
231

May be I'm not understanding your problem. – Bhojendra Rauniyar Jul 24 '15 at 08:33
I need the red div to be displayed – Baldráni Jul 24 '15 at 08:33

score 2 · Answer 2 · answered Jul 24 '15 at 08:34

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

Beautiful ! Well played :) – Baldráni Jul 24 '15 at 08:37 — Baldráni, Jul 24 '15 at 08:37

score 2 · Answer 3 · answered Jul 24 '15 at 08:37

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>

score 2 · Accepted Answer · answered Jul 24 '15 at 08:37

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>

This solution is great too ! – Baldráni Jul 24 '15 at 08:39 — Baldráni, Jul 24 '15 at 08:39

score 0 · Answer 5 · answered Jul 24 '15 at 08:32

0

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;
}

answered Jul 24 '15 at 08:32

MajAfy

3,007
10
47
83

I want to erase totally the
– Baldráni Jul 24 '15 at 08:33

score 0 · Answer 6 · answered Jul 24 '15 at 08:32

0

Use min-height in .box css like:

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

answered Jul 24 '15 at 08:32

Vivek Gupta

955
4
7

I cant specify the height o the box; I edit my question. – Baldráni Jul 24 '15 at 08:35
@baldrani This is the min-height, Height of div will grow automatically as and when content of div will change – Vivek Gupta Jul 24 '15 at 08:36

How to simulate multiple tag with CSS

6 Answers6

How to simulate multiple
tag with CSS