HebleV HebleV - 3 years ago 236
CSS Question

Displaying image in align to login form using materializecss

Updated screenshot

Login and image

You can see the entire code here http://codepen.io/anon/pen/BjqxOq

I have created a login page using materializecss and now i want to display a image in alignment to login form. But when I try to do it displays one above the other as displayed in screenshot.

Also I did make some changes like I added class="right align" to image due to which image moved right side but i was unable to move login form up in line with image.

<div>
<img src="images/one.png" height="480" width="580">
</div>

<div id="login-page" class="row">
<div class="col s12 z-depth-6 card-panel">
<form class="login-form">
<div class="row">
<div class="input-field col s12 center">
<h3 class="left login-form-text">Login</h3>
</div>
</div>

<div class="row margin">
<div class="input-field col s4">
<i class="mdi-social-person-outline prefix"></i>
<input class="validate" id="email" type="email" >
<label for="email" data-error="wrong" data-success="right" class="center-align">Email</label>
</div>
</div>

<div class="row margin">
<div class="input-field col s4">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password" type="password" >
<label for="password">Password</label>
</div>
</div>

<div class="row">
<div class="input-field col s12 m12 l12 login-text">
<input type="checkbox" id="remember-me" />
<label for="remember-me">Remember me</label>
</div>
</div>

<div class="row">
<div class="input-field col s1">
<a href="" class="btn waves-effect waves-light grey darken-2 col s12">Login</a>
</div>
</div>
</div>

Answer Source

You would need to put the list around the div's containing the form and image, and that will be difficult due to the complexity of your project...How about this post here? How to get these two divs side-by-side? Would that work?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download