CODEWITHSUNDEEP
htmlcss
user2507818
user2507818

Reputation: 3037

Is it possible to move content from one div to another purely via CSS?

CSS

<style>
#layer1 {
    height: 60px;
    background-color:#00FF00;   
}
#layer2 {
    height: 60px;
    background-color:#FFFFCC;

}
</style>

HTML

<div id="layer1">
This is the first div.
</div>
<div id="layer2">
This is the second div.
</div>

Question

If do not change the structure of this HTML, and only change the CSS code, is it possible to move content from one div to the other? I want to move the text "This is the first div." to layer2, to make the text: "This is the first div." show at the left side of layer2, and make the text: "This is the second div." to show at the right side of layer2.

Upvotes: 0

Views: 1247

Answers (4)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85565

Your question is vulnerable to understand what you are asking so some said not possible without javascript. But as far as I understand your question is to make float: left; to your #layer1, and #layer2 if this is likely to this

This is the first div. This is the second div.

#layer1, #layer2{
float: left;
}

If likely to this use float: left; to #layer2 and float: right; to #layer1

This is the second div.This is the first div.

#layer2{
float: left;
}
#layer1{
float: right;
}

Upvotes: 1

Muhammad Umer
Muhammad Umer

Reputation: 2308

No it is not possible to do that without touch html structure or using javascript.

It would have been possible only if there was a way to select text element inside div in css, then we could push it down and that would extend the other div to accommodate it.

Upvotes: 0

doppelgreener
doppelgreener

Reputation: 5094

If you mean that you want the elements to show up like this...

This is the first div. This is the second div.

... instead of like this...

This is the first div.

This is the second div.

... then you don't need to "move content" between the two to do this. Use the display:inline-block; property as in the example below, and the div elements you're using will sit on the same line, instead of each one starting on a new line.

#layer1,
#layer2 {
    display: inline-block;
}

Upvotes: 0

user2652246
user2652246

Reputation:

You can use the CSS3 content property. However, this isn't recommended as it makes your code look, well, really weird. You could just move the content manually and it wouldn't make a difference. Unless I don't understand what you're saying, in which case, please clarify. If you want to make it responsive, then just use Javascript instead.

Upvotes: 0

Related Questions