4 replies [Last post]
Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 8 years 4 days ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

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


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







Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You've got a class of .both

You've got a class of .both with a height of 0 on it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 8 years 4 days ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

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!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Am I missing something? Your

Am I missing something? Your working form doesn't have any stylesheet linked to it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 8 years 4 days ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

oh oh

Tyssen wrote:
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.