Semantic-UI-CSS
Semantic-UI-CSS copied to clipboard
Vertical Divider goes above other div elements
This is a meteor plain html file. I've copied the example available in the Semantic-Ui tutorial and the vertical divider goes above the top attached label and the bottom attached label, which is not the correct behaviour
<head>
<title>testUiGrid</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<div class="html ui top attached segment">
<div class="ui top attached label">You've pressed the button {{counter}} times.</div>
<div class="ui two column middle aligned relaxed fitted stackable grid">
<div class="column">
<div class="ui form segment">
<div class="field">
<label>Username</label>
<div class="ui left icon input">
<input type="text" placeholder="Username"><i class="user icon"></i>
</div>
</div>
<div class="field">
<label>Password</label>
<div class="ui left icon input"><input type="password"><i class="lock icon"></i></div>
</div>
<div class="ui blue submit button">Login</div>
</div>
</div>
<div class="ui vertical divider">Or</div>
<div class="center aligned column">
<div class="huge green ui labeled icon button"><i class="signup icon"></i>Sign Up</div>
</div>
</div>
<div class="ui bottom attached label">You've pressed the button {{counter}} times.</div>
</div>
</template>