2

I'm trying to achieve a 3 column layout using the column-count property. But it gives me strange effects in Webkit and Blink (Google Chrome) [Firefox 3.6+ works fine]. If you look at the attached code and run the snippet, you can see that there is some extra space after the checkboxes and before the button at the end. image of the problem, rendered in Safari Actually, as you can see in the inspector, the <div class="centeredForm formEntry optionList"> containing the <div class="centeredForm optionListMainContainer" style="margin-top: -1.525em;"> gets the wrong height. It behaves as the column-countproperty was not set. Is there a workaround for this problem in Webkit?

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */

body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
div.subVCs {
  width: 100%;
  position: relative;
}
.view-size-100p {
  width: 100%;
  display: inline-block;
  position: relative;
  vertical-align: top;
  padding: 2px 6px 3px 6px;
}
@media only handheld,
only screen and (max-width: 1024px),
only screen and (max-device-width: 1024px) {
  .view-size-100p {
    width: 100%;
    display: block;
  }
}
html,
html * {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0px;
  box-sizing: border-box;
}
html p,
html a,
html ul,
html ol,
html li {
  font-size: 16px;
}
body {
  margin: 5px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
form.centeredForm {
  position: relative;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
form.centeredForm > fieldset {
  border-width: 5px;
  border-style: solid;
  border-color: #d3d3d3;
  border-collapse: collapse;
  padding: 10px;
}
form.centeredForm > fieldset > legend {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
}
.centeredForm .formEntry {
  display: block;
  margin: 5px;
}
.centeredForm .formEntry.submit,
.centeredForm .formEntry.button {
  text-align: right;
}
.centeredForm .formEntry.hidden {
  display: none;
  width: auto;
}
.centeredForm .formEntry.spacer {
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  display: block;
}
.centeredForm .formEntry > label,
.centeredForm .formEntry > input,
.centeredForm .formEntry > div {
  display: inline-block;
  padding: 0.125em 0.375em 0.1875em 0.375em;
}
.centeredForm .formEntry > label {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  width: 40%;
  vertical-align: baseline;
}
.centeredForm .formEntry:not(.hidden) > input,
.centeredForm .formEntry.optionList > div,
.centeredForm .formEntry.select > div,
.centeredForm .formEntry.radio > div {
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  width: 60%;
}
.centeredForm .formEntry.submit > input,
.centeredForm .formEntry.button > input {
  width: 30%;
}
.centeredForm .formEntry:not(.submit):not(.button):not(.hidden) {
  text-align: right;
}
.centeredForm .formEntry.optionList .optionListMainContainer {
  -webkit-column-width: auto;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -webkit-column-rule: none;
  -moz-column-width: auto;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -moz-column-rule: none;
  column-width: auto;
  column-count: 3;
  column-gap: 0;
  column-rule: none;
}
.centeredForm .formEntry.optionList .optionListMainContainer,
.centeredForm .formEntry.optionList .optionListMainContainer * {
  text-align: left;
  padding: 0.125em 0.375em 0.1875em 0.375em;
}
.centeredForm .formEntry.optionList .optionListMainContainer .optionListTitleContainer {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  display: block;
  margin-top: 0.625em;
  margin-bottom: 0.1875em;
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  z-index: 0;
}
.centeredForm .formEntry.optionList .optionListMainContainer .optionListTitleContainer:first-child {
  margin-top: -1.525em;
}
.centeredForm .formEntry.optionList .optionListMainContainer .optionListContainer {
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  padding: 0px !important;
}
.centeredForm .formEntry.select .selectMainContainer {
  text-align: left;
  padding: 0px !important;
}
.centeredForm .formEntry.radio .radioMainContainer {
  -webkit-column-width: auto;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -webkit-column-rule: none;
  -moz-column-width: auto;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -moz-column-rule: none;
  column-width: auto;
  column-count: 3;
  column-gap: 0;
  column-rule: none;
  text-align: left;
  padding: 0px !important;
}
.centeredForm .formEntry.radio .radioMainContainer .radioContainer {
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  padding: 0px !important;
}
.centeredForm div.formEntry:nth-of-type(2n) {
  color: black;
  background-color: #f5f5ff;
}
/*
 * @CSS3 Inputs
 * @author kellers
 **/

:root input {
  -moz-border-radius-topleft: 0.5em;
  -moz-border-radius-topright: 0.5em;
  -moz-border-radius-bottomright: 0.5em;
  -moz-border-radius-bottomleft: 0.5em;
  -webkit-border-top-left-radius: 0.5em;
  -webkit-border-top-right-radius: 0.5em;
  -webkit-border-bottom-right-radius: 0.5em;
  -webkit-border-bottom-left-radius: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  border-collapse: collapse;
  outline: 0px none;
  vertical-align: baseline;
  padding: 0.125em 0.375em 0.1875em 0.375em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
:root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="reset"]):not([type="submit"]):not([type="button"]).ui-spinner-input {
  margin: 0px 17px 0px 0px;
}
:root input[type="color"] {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
:root span.ui-spinner.ui-widget {
  font-size: inherit !important;
}
:root input[type=number] {
  text-align: right;
}
:root input[disabled] {
  color: #545454 !important;
  -moz-opacity: .4;
  -webkit-opacity: .4;
  opacity: .4;
}
:root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="reset"]) {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
:root input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="reset"]):not([disabled]):focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
:root div[data-type="button"] {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
:root div[data-type="button"]:not([data-disabled]):focus,
:root div[data-type="button"]:not([data-disabled]):hover {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
:root button:not([data-disabled]):not(.ui-datepicker-close):not(.ui-datepicker-current):not(.ui-button) {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
:root button:not([data-disabled]):not(.ui-datepicker-close):not(.ui-datepicker-current):not(.ui-button):not([data-disabled]):focus,
:root button:not([data-disabled]):not(.ui-datepicker-close):not(.ui-datepicker-current):not(.ui-button):not([data-disabled]):hover {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
:root input[type="button"]:not([disabled]):hover,
:root input[type="submit"]:not([disabled]):hover {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
}
:root input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: black;
  background-color: #f8f8f8;
}
:root input[type="submit"]:active,
input[type="button"]:active {
  border-width: 1px;
  border-style: inset;
  border-color: #808080;
  border-collapse: collapse;
}
:root div[data-type="button"],
:root input[type="button"] {
  margin: -1px -1px -1px -3px;
}
:root div[data-type="button"],
:root input[type="button"],
:root div[data-type="button"]:root button:not(.ui-datepicker-close):not(.ui-datepicker-current):not(.ui-button),
:root input[type="button"]:root button:not(.ui-datepicker-close):not(.ui-datepicker-current):not(.ui-button) {
  min-width: 5px;
  line-height: 1;
  display: inline-block;
}
:root button:not(.ui-datepicker-close):not(.ui-datepicker-current):not(.ui-button) {
  margin: -1px -1px -1px 1px;
}
/**
 * @info Cross-browser CSS3 Image-Free Custom Checkbox
 * @author Dmitriy Kubyshkin
 * @changed by kellers
 * @web http://kubyshkin.ru/posts/cross-browser-css3-image-free-custom-checkbox.html
 */

.my_own_styled_checkbox {
  position: relative;
  display: inline-block;
  zoom: 1;
}
.my_own_styled_checkbox * {
  font-size: inherit !important;
}
.my_own_styled_checkbox .checkBox,
.my_own_styled_checkbox .checkBoxOverlay {
  padding: 0px !important;
  box-sizing: content-box;
}
.my_own_styled_checkbox .checkBox {
  position: absolute;
  display: inline-block;
  top: 0.125em;
  width: 1em;
  height: 1em;
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  border-collapse: collapse;
  background-color: white;
  -moz-border-radius-topleft: 50%;
  -moz-border-radius-topright: 50%;
  -moz-border-radius-bottomright: 50%;
  -moz-border-radius-bottomleft: 50%;
  -webkit-border-top-left-radius: 50%;
  -webkit-border-top-right-radius: 50%;
  -webkit-border-bottom-right-radius: 50%;
  -webkit-border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  vertical-align: bottom;
  vertical-align: text-bottom;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.my_own_styled_checkbox > input {
  cursor: pointer;
}
.my_own_styled_checkbox > input[disabled] {
  cursor: default;
}
.my_own_styled_checkbox > input[disabled] + .checkBox {
  border-width: 1px;
  border-style: solid;
  border-color: #eeeeee;
  border-collapse: collapse;
  background-color: #eee;
}
.my_own_styled_checkbox > input[disabled] + .checkBox > .checkBoxOverlay {
  border-bottom: 0.125em solid #999;
  border-left: 0.125em solid #999;
}
.my_own_styled_checkbox > input[disabled] + .checkBox + span.checkBoxText {
  color: #999;
}
.my_own_styled_checkbox .checkBox > .checkBoxOverlay {
  position: absolute;
  display: none;
  border-bottom: 0.15em solid black;
  border-left: 0.15em solid black;
}
.my_own_styled_checkbox input:checked + .checkBox > .checkBoxOverlay {
  left: 0.125em;
  top: 0em;
  width: 1em;
  height: 0.375em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  zoom: 1;
  display: block;
  z-index: 2;
}
.my_own_styled_checkbox input {
  position: absolute;
  outline: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  z-index: 3;
  opacity: 0;
}
.my_own_styled_checkbox > input:not([disabled]):active + .checkBox,
.my_own_styled_checkbox > input:focus + .checkBox {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.my_own_styled_checkbox > input:focus + .checkBox,
.my_own_styled_checkbox > input:not([disabled]):hover + .checkBox {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.my_own_styled_checkbox > span.checkBoxText {
  display: block;
  vertical-align: top;
  margin-left: 1.5em !important;
  word-break: break-all;
}
<div class="userEdit view-size-100p">
  <div class="userEdit">
    <div class="mainDiv">

      <form class="centeredForm centeredForm" action="" method="post" enctype="multipart/form-data">
        <fieldset>
          <legend>some title</legend>
          <div class="centeredForm formEntry optionList">
            <label>some label text</label>
            <span style="display: inline-block;width: 60%;margin:0px;padding:0px;visibility: hidden;">&nbsp;</span>
            <div class="centeredForm optionListMainContainer" style="margin-top: -1.525em;">
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" checked="checked" tabindex="21"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" tabindex="22"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" checked="checked" tabindex="23"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" tabindex="24"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" checked="checked" tabindex="25"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" tabindex="26"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" checked="checked" tabindex="27"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" tabindex="28"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" checked="checked" tabindex="29"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
              <span class="centeredForm optionListContainer my_own_styled_checkbox">
     <input type="checkbox" name="ckeckboxname[]" value="5" tabindex="30"><span class="centeredForm checkBox"><span class="centeredForm checkBoxOverlay"></span></span>
              <span class="centeredForm checkBoxText">Test User</span>
              </span>
            </div>
          </div>
          <span class="centeredForm formEntry submit">
   <input type="submit" name="pEditSingleUserGroup" value="some action" tabindex="32">
  </span>
        </fieldset>
      </form>

    </div>
  </div>
</div>
beatjunky99
  • 149
  • 11
  • It would be more helpful if you reduced your code to just the **relevant** CSS rather than the whole stylesheet. – Paulie_D Jul 09 '15 at 11:42
  • 2
    it's because you have made your column holder inline-block – Pete Jul 09 '15 at 11:46
  • here is update demo link :https://jsfiddle.net/4mepm5dL/ – Raza Hussain Jul 09 '15 at 12:18
  • Looks like Chrome bug [#297782](https://code.google.com/p/chromium/issues/detail?id=297782) although @RazaHussain has a solution but no explanation on what was changed. – andyb Jul 09 '15 at 12:52
  • @Paulie_D I've allready stripped away all code, that does not directly interact, but it's not easy to reduce any further... Therefore i made a live snippet you can go through with a web inspector :-) – beatjunky99 Jul 09 '15 at 14:17
  • @Pete Using `display: block` on the `div.optionListMainContainer` would break the whole layout, but fix the gap... maybe I'll add some `position: relative;` to bring the layout back... Thx for the tip! – beatjunky99 Jul 09 '15 at 14:21

1 Answers1

3

I have made few changes in your code here is demo: https://jsfiddle.net/4mepm5dL/

Changes:

HTML Line 11: <div class="centeredForm optionListMainContainer" style="margin-top: -1.525em; float:right"> // added 'float:right'

HTML Line 55: <div style='clear:both'></div> // added

CSS Line 247:

.centeredForm .formEntry > label,
.centeredForm .formEntry > input,
.centeredForm .formEntry > div {
    /*display: inline-block; //removed this line */
    padding: 0.125em 0.375em 0.1875em 0.375em;
}
Kristján
  • 18,165
  • 5
  • 50
  • 62
Raza Hussain
  • 762
  • 8
  • 18
  • I flaged your answer as the accepted one, with a bit more tricking i got it fine, but the hint to use `float: right` and afterwards a `div` with `clear: both` fixes the problem. Thx! Also thanks to @Pete and you ( @raza-hussain ) for the hint to not use `display: inline-block;`. – beatjunky99 Jul 09 '15 at 17:08
  • @pate thanks for updating my answer I ll try to add explanation with my answers in future. – Raza Hussain Jul 10 '15 at 05:13