On our site we have just started using the grid system and we are in the process of designing a plugin for creating an account. The grid system works if I use it incorrectly however we need it to work properly. Here is the code, the work is being done on a localhost, so unfortunately I don't have a live link.
<div class="container_16 iti-wordpress">
<div class="grid_16 stroke alpha omega">
<h2 class="box-header"><?php _e("Account Creation", "iti-wordpress-signup"); ?></h2>
<div class="box-body clearfix">
<div class="grid_16 prefix_1 suffix_1 alpha omega">
<form action="?action=check_account" enctype="multipart/form-data" method="post" name="iti-wordpress-signup" id="signup_form">
<div class="form_field_group mb10">
<h3><?php _e("Create a new account today", "iti-wordpress-signup"); ?></h3>
<p><?php _e("Enter birthdate below", "iti-wordpress-signup"); ?></p>
<div class="form_field small mb10">
<label for="signup_dob"><?php _e("Date of Birth", "iti-wordpress-signup"); ?></label>
<input class="input_text input_date" type="text" name="signup[dob]" id="signup_dob" />
</div>
<div class="form_field small inline">
<label for="signup_firstname"><?php _e("First Name", "iti-wordpress-signup"); ?></label>
<input class="input_text" type="text" name="signup[firstname]" id="signup_firstname" />
</div>
<div class="form_field small inline">
<label for="signup_surname"><?php _e("Last Name", "iti-wordpress-signup"); ?></label>
<input class="input_text" type="text" name="signup[surname]" id="signup_surname" />
</div>
<p class="clearfix">
<input class="flat-button right medium-width" type="submit" value="<?php _e("Submit", "iti-wordpress-signup"); ?>" />
</p>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
What is happening is that the grid_14 is supposed to be 820 and instead it is shrinking when I use the prefix_1 and suffix_1. Does anyone have any ideas as to why this is happening? This is a mix of CSS, HTML and PHP. The grid 14 is there but the suffix and prefix are pulling into the grid 14 instead of allowing the grid_14 to float within in the 940px grid 16 declared before it.