Login / Status
developer.Resource
Home . Documentation . Document Library . Extension Manuals
Sponsors
hosted by punkt.deTYPO3 and Open Source Magazine

1.11. CSS corner

How to get labels and fields in two columns with css

Example picture:

Example css:

fieldset.tx-powermail-pi1_fieldset {
/* Disable border */
border: none;
}
fieldset.tx-powermail-pi1_fieldset label {
/* Style labels */
display: block;
width: 150px;
float: left;
clear: both;
}
fieldset.tx-powermail-pi1_fieldset input,
fieldset.tx-powermail-pi1_fieldset select {
/* Style input fields */
width: 200px;
border: none;
border-bottom: 1px solid black;
margin-left: 10px;
}
div.tx_powermail_pi1_fieldwrap_html {
/* Increase margin between every field */
margin: 10px 0;
}

Additional note (clearfloat):

Maybe it's useful to add a div layer to the tmpl_formwrap.html at the end, to clear the floats like:

<div style=”clear: both”></div>

How to get two columns

Note:

You can use more than only one fieldset to style your form with more columns.

So you should add two pages (fieldsets) to your form and choose “single step”.

Example picture:

Example css:

fieldset.tx-powermail-pi1_fieldset {
/* Disable border */
border: none;
}
fieldset.tx-powermail-pi1_fieldset_1 {
/* Style left fieldset */
width: 45%;
float: left;
}
fieldset.tx-powermail-pi1_fieldset_2 {
width: 45%;
}

Additional note (clearfloat):

Maybe it's useful to add a div layer to the tmpl_formwrap.html at the end, to clear the floats like:

<div style=”clear: both”></div>