Modello a scatola 3 box

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ciao prova a togliere height:auto; e metti overflow:hidden; al box centrale
 

invisible93

Utente Attivo
12 Apr 2013
59
0
6
Firenze
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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;
 
Discussioni simili
Autore Titolo Forum Risposte Data
N Cerco marca e modello di questa IPcam. IP Cam e Videosorveglianza 1
D mailto con modello Posta Elettronica 3
felino Elvox citofono: quale modello e'? Discussioni Varie 7
A Chiarimento indicazione ISP nel modello AA9 negozio on line E-Commerce 1
S [PHP] Aiuto creazione form php per completamento modello word PHP 1
P Modello Er? Database 0
P [MySQL] MODELLO ER, XAMPP E HEIDI SQL MySQL 0
L Quesito modello dreamwaver HTML e CSS 1
M stampa modello f24 con php PHP 1
felino [Scheda Madre] Qual modello è stato installato? Hardware 14
T "Storiella" sul modello logico e concettuale e sulle query SQL MySQL 4
S Come mettere Menu a tendina in un modello CSS? HTML e CSS 0
Web Designer Scarica il Modello e istruzioni Unico Pf/2012 Leggi, Normative e Fisco 0
D modello concettuale [database] Database 0
Longo8 Chat modello facebook PHP 2
D aiuto... modello .dwt perso come posso ricrearlo? HTML e CSS 0
G dove posso trovare un modello di disclaimer e di privacy? Leggi, Normative e Fisco 2
G Come modificare il <title> sulle pagine derivanti da modello Dreamweaver? HTML e CSS 1
W Applicare modello alle pagine con Dreamweaver mx Webdesign e Grafica 0
Z nascondere intestazione in un documento word [era:Modello word] Windows e Software 1
B Modificare <title> in modello dreamweaver Webdesign e Grafica 0
0 offro lavoro: creare modello 3D Offerte e Richieste di Lavoro e/o Collaborazione 0
D aiuto per creazione pagine web con collegamenti a modello predefinito HTML e CSS 2
G Modello pubblicato Flash 2
J C# Programma console che calcola il volume di una scatola .NET Framework 2
V Mailchimp - box di testo: cambia da solo il testo inserito Email Marketing 2
M Mailchimp: arrotondare bordi di box testuali Email Marketing 6
Shyson Centrare box css HTML e CSS 2
Z Conteggi BOX per ogni 5 righe PHP 1
G Box con testo casuale WordPress 1
F add box top page HTML e CSS 9
moustache text box + post php con IE si comporta in modo strano PHP 16
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
F classic asp popolare combo box javascript Presentati al Forum 1
S [WordPress] Creare una select box con partita iva e codice fiscale in base a una logica. WordPress 0
P Riproduzione avi file in una picture box da file .dll .ocx ed altri in visual basic 10 express Offerte e Richieste di Lavoro e/o Collaborazione 0
spider81man [PHP] Alert Box per confermare Inserimento o Cancellazione dato. PHP 4
B [HTML] Problema main box di un template HTML e CSS 2
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
O [HTML] form box ricerca HTML e CSS 3
felino TV Box Android: consiglio su quale acquistare Discussioni Varie 0
Matteol92 [HTML] Creare social box senza sovrapposizione HTML e CSS 5
I [HTML] Codice box testo con scrollbar sopra immagine HTML e CSS 1
S [HTML] Box immagine e testo HTML e CSS 1
F come creare un search box coi file .xml dei merchant? XML 0
S Problema drop-down box PHP 22
felino [CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore HTML e CSS 2
F Quale privacy policy menzionare in un BOX COMMENTI? Leggi, Normative e Fisco 0
D Creare un box ricerca HTML e CSS 5
G Aiuto su combo box di access MS Access 0

Discussioni simili