Elementos transpassando Div

[willianeo]

Bom-dia pessoal.
Tenho um problema ao criar uma página com alguns checkbox's.

QUando dou Zoon Ctrl -- os dados contidos na div saaem para fora.
Segue o trecho do código.

 /*Configurações grupo 1 e grupo 2*/
            #grupoCheckBox1 {
                float: left;
                padding: 10px 10px 10px 0;
                /*margin: 10px;*/
            }
            #g1 {
                float: left;
                border-radius: 8px;
                padding: 0 0 0 0;
                margin-right: 10px;
                height: 260px;
                width: 300px;
                background: url(Imagens/Grupo1.fw.png);
                background-repeat: no-repeat;
            }
            #g2 {
                float: left;
                border-radius: 8px;
                padding: 0 0 0 0;
                margin-right: 10px;
                height: 260px;
                width: 300px;
                background: url(Imagens/Grupo1.fw.png);
                background-repeat: no-repeat;
            }
            #g3 {
                float: left;
                border-radius: 8px;
                padding: 0 0 0 0;
                margin-right: 10px;
                height: 260px;
                width: 300px;
                background: url(Imagens/Grupo1.fw.png);
                background-repeat: no-repeat;
            }
            #g4 {
                float: left;
                border-radius: 8px;
                padding: 0 0 0 0;
                margin-right: 10px;
                height: 260px;
                width: 300px;
                background: url(Imagens/Grupo1.fw.png);
                background-repeat: no-repeat;
            }

Agora o código HTML

                <div id="grupoCheckBox1">
                    <div id="g1">
                        <h5>Tipo de Deficiência</h5>
                        <ul>
                            <li>
                                <input name="Auditiva" type="checkbox" value="Auditiva" /> Auditiva
                            </li>
                            <li>
                                <input name="Fisica" type="checkbox" value="Física" /> Física
                            </li>
                            <li>
                                <input name="IntelectualMental" type="checkbox" value="Intelectual (Mental)" /> Intelectual (Mental)
                            </li>
                            <li>
                                <input name="Visual" type="checkbox" value="Visual" /> Visual
                            </li>
                            <li>
                                <input name="Multipla" type="checkbox" value="Múltipla" /> Múltipla
                            </li>
                            <li>
                                <input name="Sindrome" type="checkbox" value="Síndrome" /> Síndrome
                            </li>
                        </ul>
                    </div>
                    <div id="g2">
                        <h5>Medicamentos Usados</h5>
                        <ul>
                            <li>
                                <input name="controledePressao" type="checkbox" value="Controle de Pressão" /> Controle de Pressão
                            </li>
                            <li>
                                <input name="controledeDiabetes" type="checkbox" value="Controle de Diabetes" /> Controle de Diabetes
                            </li>
                            <li>
                                <input name="anticonvulsivos" type="checkbox" value="Anticonvulsivos" /> Anticonvulsivos
                            </li>
                            <li>
                                <input name="antdepressivos" type="checkbox" value="Antdepressivos" /> Antdepressivos
                            </li>
                            <li>
                                <input name="outrosMedicamentosUsados" type="checkbox" value="Outros" /> Outros
                            </li>
                        </ul>
                    </div>
                    <div id="g3">
                        <h5>Profissionais mais requisitados</h5>
                        <ul>
                            <li>
                                <input name="fisioterapeutas" type="checkbox" value="Fisioterapeutas" /> Fisioterapeutas
                            </li>
                            <li>
                                <input name="fonoaudiologos" type="checkbox" value="Fonoaudiólogos" /> Fonoaudiólogos
                            </li>
                            <li>
                                <input name="psicologos" type="checkbox" value="Psicólogos" /> Psicólogos
                            </li>
                            <li>
                                <input name="medicosemGeral" type="checkbox" value="Médicos Em Geral" /> Médicos Em Geral
                            </li>
                            <li>
                                <input name="nutricionistas" type="checkbox" value="Nutricionistas" /> Nutricionistas
                            </li>
                            <li>
                                <input name="outrosprofissionaisMaisRequisitados" type="checkbox" value="Outros" /> Outros
                            </li>
                        </ul>
                    </div>
                    <div id="g4">
                        <h5>Locais de maior frequência</h5>
                        <ul>
                            <li>
                                <input name="clinicadeFisioterapia" type="checkbox" value="Clínica de Fisioterapia" /> Clínica de Fisioterapia
                            </li>
                            <li>
                                <input name="apae" type="checkbox" value="APAE" /> APAE
                            </li>
                            <li>
                                <input name="clinicadeHemodialise" type="checkbox" value="Clínica de Hemodiálise" /> Clínica de Hemodiálise
                            </li>
                            <li>
                                <input name="unidadesdeReabilitacao" type="checkbox" value="Unidades de Reabilitação" /> Unidades de Reabilitação
                            </li>
                            <li>
                                <input name="academiaseClubes" type="checkbox" value="Academias e Clubes" /> Academias e Clubes
                            </li>
                            <li>
                                <input name="instituicoesdeEnsino" type="checkbox" value="Instituições de Ensino" /> Instituições de Ensino
                            </li>
                            <li>
                                <input name="localdeTrabalho" type="checkbox" value="Local de Trabalho" /> Local de Trabalho
                            </li>
                        </ul>
                    </div>
                </div>

Obrigado pela ajuda

Editado Agosto 18, 2013 por willianeo

[Markus Magnus]

Ao diminuir o zoom na div g4 os checkbox ficam maiores que a div, você pode resolver isso tirando o tamanho fixo das divs g1, g2, g3 e g4.

Caso você queira que as divs ocupem uma certa altura, mesmo tendo poucas checkbox utilize o min-height, logo se os checkbox somados tiverem 100px de altura a div continuará com 260px, porém se elas tiverem 350px de altura a sua div será redimensionada para 350px.

Ao aumentar o zoom as divs g1, g2, g3 e g4 deixam de ocupar uma linha para as divs g1, g2, g3 e g4 permaneçam na mesma linha mesmo com o aumento de zoom a div grupoCheckBox1 deve ter um tamanho fixo e ao dar zoom aparecerá uma barra de rolagem horizontal em baixo da tela.

Espero ter ajudado

Abraços