CODEWITHSUNDEEP
javascriptcss
lobianco
lobianco

Reputation: 6276

Dynamically created <div> won't position properly

I am making a web app that utilizes two textareas, and when a button is clicked one of the textareas is replaced with a div using JavaScript. I am trying to get the div inserted onto the page in the exact position as its textarea predecessor so the user doesn't notice the switch, but for some reason it's not as easy as it should be. The vertical position of the div seems to change based on the content within it. I have a feeling it has to do with 

display: inline-block;

in my CSS file, but that's needed to keep the two textareas horizontally centered without a fixed width.

Any help would be appreciated.

The web app can be found on my site: http://lobian.co/code/remove-attributes/. To view the problem, input any amount of text in the left textarea then click "Remove Attributes". The div in question will replace the textarea.

UPDATE: Musa's answer below fixed the problem.

Upvotes: 0

Views: 191

Answers (2)

Musa
Musa

Reputation: 97707

Just give both elements the same vertical-alignment, eg vertical-align:top

DEMO

Upvotes: 1

Waqar Alamgir
Waqar Alamgir

Reputation: 9978

try this

div#color_change {
    padding: 0;
}

You are giving 2px padding of div(44% width) which increases its size.

Upvotes: 1

Related Questions