How to achieve this layout? - html

Question

I want to basically create this kind of layout:
What would be the best way to achieve this?

Answer 1

Your HTML:
<div id="login">
<div class="float_left">
Your input here <br/>
Your remember me checkbox and text
</div>
<div class="float_left">
Your second input here <br/>
And then your forget password link
</div>
<div class="float_left">
Login button here
</div>
<br style="clear:both;"/>
</div>
Your CSS:
#login {}
.float_left {float:left;}

Answer 2

Here's the semantically clean way to do it:
The HTML:
<form>
<fieldset>
<input id="username" placeholder="user name">
<label><input id="rememberme" type="checkbox"> Remember me</label>
</fieldset>
<fieldset>
<input id="password" type="password" placeholder="password">
Forgot your password?
</fieldset>
<input type="submit" value="Login">
</form>
The CSS:
fieldset {
display: block;
float: left;
margin-right: 8px;
}
#username, #password {
display: block;
width: 100%;
}
Or something like that. I would use labels instead of placeholders, but there weren't any labels in your mockup, so I didn't want to add extra elements.

Answer 3

The "best way" would be to use either flexible box model (display: box, if you have some specific sizes to give to the blocks so they'll align) or table layout (display: table). Unfortunately, Internet Explorer 6 and 7 have absolutely no support for any of them.
So I'd go with either (as this question is GWT-oriented):
a plain old <table> in an HTMLPanel (and use role=presentation for best accessibility)
FlexTable or Grid widget (which are backed by a table)

Answer 4

Look, I've turned Sam's answer above into UI:Binder template. (Errors are possible, I'm writing XML here by hand.)
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.float_left {float:left;}
</ui:style>
<g:HTMLPanel>
<g:HTMLPanel class='{style.float_left}'>
<g:TextBox ui:field='loginTextBox'/>
<br/>
<g:CheckBox ui:field='rememberMeCheckBox'>Remember me</g:CheckBox>
</g:HTMLPanel>
<g:FlowPanel class='{style.float_left}'>
<g:PasswordTextBox ui:field='passwordTextBox'/>
<br/>
<g:Hyperlink ui:field='passwordRestorationHyperlink'>Forgot your password?</g:Hyperlink>
</g:FlowPanel>
<g:FlowPanel class='{style.float_left}'>
<g:Button ui:field='loginButton' text='Login'>Login</g:Button>
</g:FlowPanel>
<br style="clear:both;"/>
</g:HTMLPanel>
</ui:UiBinder>
And the corresponding Java class. That should go with no surprise - #UiField and uiBinder.createAndBindUi(this) are your friends there.

Answer 5

I know it may sound bad, but I think tables is the best way to go in this case:
<table style="border: none;" cellspacing="0" cellpadding="0">
<tr>
<td>
<input name="login" />
</td>
<td>
<input name="password" type="password" />
</td>
<td>
<input name="login" type="submit" value="Login" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="keepMeLogged">
<label for="keepMeLogged">Keep me logged in</label>
</td>
<td>
Forgot your password?
</td>
<td>
</td>
</tr>
</table>

Answer 6

CSS
input[type=text] { width: 200px; }
span.keep { display: inline-block; width: 200px; }
HTML
<input type="text" /> <input type="text" /> <button>Login</button> <br />
<span class="keep"><input type="checkbox" />Keep me logged in</span>
Forgot your password?
See it live: http://jsfiddle.net/foghina/92E2a/