Modello a scatola 3 box

invisible93 · 29 Mag 2013

Ho un problema che non riesco a risolvere..
Praticamente nella mia pagina ho un box centrale con 2 box dentro (uno a destra, uno a sinistra).
Dentro ai due box(destra e sinistra) ci sono scritti dei testi abbastanza lunghi e quindi io ho messo l'altezza automatica.
Anche al box centrale ho messo l'altezza automatica, però quest'ultimo non si "adatta" alle lunghezza degli altri 2 box che sono al suo interno.
Come faccio a risolvere?
vi posto il codice

HTML:

<div id="centrale"> 
 <h2 align="Center" class="titolo2">Esempio </h2> 
<div id="centro_sinistra" > testo.......... </div>
<div id="centro_destra" > testo.......... </div>
           </div>
questo è il css:

#centrale {
position:relative;
margin:auto;
width:80%;
height:auto;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
padding:20px;
}
#centro_sinistra{
position:relative;
float:left;
width:65%;
height:100%;
padding-left:10%;
}
#centro_destra{
position:relative;
float:right;
width:35%;
height:100%;
}

Non so cosa sbaglio.. aiutatemi voi
grazie

criric · 29 Mag 2013

ciao prova a togliere height:auto; e metti overflow:hidden; al box centrale

invisible93 · 29 Mag 2013

criric ha scritto:
ciao prova a togliere height:auto; e metti overflow:hidden; al box centrale

Provato e non funziona purtroppo

Il fatto è che sul mio computer si vede bene perché ho uno schermo da 27" e una risoluzione di 1920x1080, ma se abbasso la risoluzione oppure cambio computer le scritte dentro ai due box escono dal box centrale

criric · 29 Mag 2013

prova questo esempio

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #centrale {
                margin:auto;
                width:80%;
                -moz-border-radius: 14px;
                -webkit-border-radius: 14px;
                border-radius: 14px;
                overflow: hidden;
            }
            #centrale p {
                margin:10px;
            }
            #centro_sinistra{
                float:left;
                width:65%;
            }
            #centro_destra{
                float:right;
                width:35%;
            }
        </style>
    </head>
    <body>
        <div id="centrale"> 
            <h2 align="Center" class="titolo2">Esempio </h2> 
            <div id="centro_sinistra" > 
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <div id="centro_destra" > 
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua.
                </p>
            </div>
        </div>
    </body>
</html>

usando il padding aumenti la lunghezza dei contenitori poi diventa difficile gestirla, io cerco sempre di evitarlo
per capire meglio come verrà la struttura ti conviene aggiungere un bordo ai contenitori per vedere come si posizionano

Codice:

border: 1px solid black;

invisible93 · 29 Mag 2013

Grazie mille funziona! :mavieni:
era da tutto il pomeriggio che ci provavo! :incazz2:

Cerca

Cerca

Modello a scatola 3 box

invisible93

Utente Attivo

criric

Super Moderatore

invisible93

Utente Attivo

criric

Super Moderatore

invisible93

Utente Attivo

Discussioni simili