Question 174928 in CSS Question posted in
Some basic documentation can be found here.

What can we do to improve our lives?

I have DIV with some CSS styling and TEXT inside DIV. How to move TEXT outside of DIV and apply some styling using either CSS or JavaScript?

HTML

<div class="divstyle">TEXT</div>

CSS

.divstyle {
    width: 200px;
    height: 50px;
    background-color: grey;
}

I create complete DIV over javascript:

var inputfield = document.createElement("div");
inputfield.textContent = inputfieldData['TEXT'];
inputfield.classList.add("divstyle");
inputfieldsContainer.appendChild(inputfield);

When it renders in browser it looks like this:

+-----------------+
| TEXT            |
+-----------------+

I wish to be like this:

TEXT
+-----------------+
|                 |
+-----------------+

What I tried:

.divstyle::before {
    top: -50px;
    left: -20px;
}

Is there a way to add DIV inside DIV using only CSS?
Maybe the solution could be to wrap the TEXT in some tag and apply CSS to it, but if it’s possible to do it over CSS?

Tags:

3

Answers


  1. 0

    Here is an example of how you can achieve this:

    var inputfield = document.createElement("div");
var innerdiv = document.createElement("div");
var span = document.createElement("span");

span.textContent = 'TEXT'; // replace with  inputfieldData['TEXT'];
span.classList.add("textstyle");

innerdiv.classList.add("innerdiv");
inputfield.classList.add("divstyle");

inputfield.appendChild(span);
inputfield.appendChild(innerdiv);

document.body.appendChild(inputfield); //replace with: inputfieldsContainer.appendChild(inputfield);
    .divstyle {
    width: 200px;
    height: 50px;
    background-color: grey;
    position: relative;
}

.textstyle {
    position: absolute;
    top: -20px; /* adjust this value to move the text up/down */
    left: 0; /* adjust this value to move the text left/right */
}

.innerdiv {
    width: 100%;
    height: 100%;
}
    <div class="divstyle">
    <span class="textstyle">TEXT</span>
    <div class="innerdiv"></div>
</div>
    Login or Signup to reply.
  2. 0

    Although I don’t understand why you want this, here is a way to achieve it :

    HTML

    <div class="divstyle">
  <span class="out">TEXT</span>
</div>

    CSS

    .divstyle {
  position: relative;
  background-color: grey;
}
.out {
  position: relative;
  top: -1em;
}
    Login or Signup to reply.
  3. 0

    You could add a span using another styling (here: textstyle)

    <div class="divstyle">
    <span class="textstyle">
        TEXT
    </span>
</div>

    which could look like that

        .textstyle {
        position: absolute;
        top: -20px;
        font-size: 24px;
    }

    The important part to notice here is that position is set to absolute, so you can position it relative to its first positioned ancestor element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search