CODEWITHSUNDEEP
javascripthtmlcssalignment
Matt
Matt

Reputation: 117

Vertically aligning animated divs

I have three buttons that set different output text when clicked and I'm trying to use W3.CSS animations to "slide" the text in and out. I almost have it working using two separate divs but cannot get them to align correctly under the buttons; the div for every other button click displays lower than the previous one.

I've tried float, vertical-align: top, display: inline-block, and a few other things so far but either used them incorrectly or something else (a conflicting parent div style, maybe?) is causing problems.

Image with a button's output displaying right under the buttons (as it should)

Image with the next button's output displaying lower than the first

I trimmed code that wasn't relevant while also leaving what was necessary to show the div structure for this particular section.

JSFiddle link

Upvotes: 0

Views: 135

Answers (1)

timur
timur

Reputation: 14577

I am not sure I totally understand your alignment requirement, but if you just want your divs to render on the same height, you could opt for position:absolute like so:

div.button_output_container {
  position: relative; 
}

div.button_output {
    margin: 16px 24px;
    width: 450px;
    position: absolute; 
}

Upvotes: 2

Related Questions