I tried and don't get it sorted out. I had the form working in a 3 column layout but with a fixed width. After changing to liquid the form's last fieldset does not expand with its content. I stripped it down, took off this and that but nothing helps. When I copy and paste the code into a naked structure it works as well.
3 columns problem form
stripped and working form
The CSS
*
{
margin: 0;
padding: 0;
}
html, body
{
width: 99.9%;
min-width: 775px;
max-width: 1280px;
background-color: #CFC;
font: 100% Geneva, Arial, Helvetica, sans-serif;
color: #000;
}
#page
{
width: 99.9%;
margin: 0 auto;
border: 1px solid #999;
background: #FFF;
}
#container
{
width: 100%;
background-color: #CCF;
}
#header
{
width: 100%;
}
#footer
{
clear: both;
width: 100%;
text-align: center;
}
/*********************************************** container for just the left and center columns */
#wrap
{
float: left;
width: 78%;
background-color: #FFC;
}
/********************************************************************************* left column */
#left
{
float: left;
width: 17%;
padding: 0 0 0 1%;
}
#left h3
{
font-size: 20px;
letter-spacing: .9px;
}
/********************************************************************* navigation list ***/
#left ul
{
list-style-type: none;
width: 100%;
}
#left li
{
display: block;
font-size: 14px;
}
/******************************************************************************** center column */
#content
{
float: right;
width: 80%;
padding: 0 .5%;
background-color: #CFF;
}
#content h3
{
font-size: 1.25em;
margin: 30px 0 0 0;
background: #F8B193;
letter-spacing: 1px;
}
#content h3.first
{
margin: 10px 0 0 0;
}
/**************************************************************************** #content lists ***/
#content dl
{
width: 100%;
background: #E3EFFD;
margin: 5px 0 0 0;
}
#content dl.even
{
background: none;
}
#content dt
{
font-size: .9em;
font-weight: bold;
}
#content dd
{
padding: 0;
overflow: hidden;
font-size: .75em;
}
/******************************************************* options list **/
#content ul
{
margin: 0 0 5px 0;
list-style-type: none;
width: 100%;
}
#content li
{
float: right;
display: inline;
padding: 0 2px;
background: #E3EFFD;
font-size: .5em;
}
/********************************************************************************* right column */
#right
{
float: right;
width: 22%;
}
h1
{
font-size: 2.25em;
margin: .3em;
}
h2
{
font-size: 1.5em;
margin: .2em 0;
}
a:link
{
color: #00f;
background-color: transparent;
}
a:visited
{
color: #909;
background-color: transparent;
}
p
{}
.both
{
clear: both;
height: 0;
overflow: hidden;
}
* html .both
{
display: none;
}
/**************************************************** classes ***/
.adsense
{
overflow: hidden;
}
@media print{#right, #left{display: none;}}
#footer ul
{
width: 90px;
float: right;
}
#footer li
{
list-style-type: none;
}
#footer img
{
border: 0;
width: 88px;
height: 31px;
}
/************************************************************** form account ***/
#content form
{
height: 1000px;
border: none;
}
#content fieldset
{
clear: both;
padding: 10px;
margin: 0;
}
#content legend
{
display: none;
}
#content label /** standard label **/
{
float: left;
width: 40px;
font-size: 12px;
font-weight: bold;
}
#content label.block
{
display: block;
width: 150px;
margin: 0 0 0 5px;
}
#content label.folder
{
display: block;
width: 200px;
margin: 0 10px 0 0;
}
#content label.radio /*** label for radio buttons ***/
{
float: left;
margin: 0 10px 0 0;
display: inline;
}
#content input /** standard text fields **/
{
float: left;
width: 250px;
margin: 0 0 10px 0;
}
#content input.folder
{
float: left;
width: 200px;
margin: 0 0 10px 0;
}
#content input.radio /*** radio buttons ***/
{
float: left;
display: inline;
margin: 0 10px 0 0;
width: auto;
}
#content input.submit
{
width: auto;
}
#content textarea
{
display: block;
}
#content select
{
width: 150px;
}
#content .wrap
{
margin: 16px 30px 20px 0;
float: left;
width: 300px;
}
#content form p
{
text-align: left;
font-size: 10px;
margin: 0 0 5px 0;
}
The HTML
Seus favoritos seguro e privado
Header
Adicione novo favorito
Adicione novo favorito
Titulo
URL
privado
público
Notas pessoais
Sua pasta pessoal
Digite uma nova pasta pessoal ou selecione uma já existente
Nova pasta pessoal
Suas pastas pessoais
Pasta 1
Pasta 2
Pasta 3
Pasta 4
Pasta 5
Pasta 6
Pasta 7
Pasta 8
For favor selecione ao menos uma categoria
Categoria 1
Automotivo
Computadores
Webdesign
Turismo
Internacional
Pessoais
Restaurantes e bares
Outra
Categoria 2
Automotivo
Computadores
Webdesign
Turismo
Internacional
Pessoais
Restaurantes e bares
Outra
Categoria 3
Automotivo
Computadores
Webdesign
Turismo
Internacional
Pessoais
Restaurantes e bares
Outra
- Pasta 1
- Pasta 2
- Pasta 3
- Pasta 4
- Pasta 5
- Pasta 6
- Pasta 7
- Pasta 8
Right column
You've got a class of .both
You've got a class of .both with a height of 0 on it.
ha!
I didn't like it already when I saw it. It does the trick on the problem form. However, the same class used is on the same fieldset in the working form. Would you be able to say why it works in one form and not in the other?
Thank you!
Am I missing something? Your
Am I missing something? Your working form doesn't have any stylesheet linked to it.
oh oh
Am I missing something? Your working form doesn't have any stylesheet linked to it.
No, obviously I was missing something. It would had bothered me a lot if it would work with the stylesheet linked. So thank you for checking again, even when the problem was already solved. I am sorry for having wasted your time.