Problema altezza div automatica

M

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Salve a tutti!
Premetto che conosco l'html e il css in modo molto basilare in quanto tutto quello che so è frutto di ricerche su internet e passione.
Sto creando una nuova pagina per il sito della mia azienda e ho un problema: ho un div container all'interno del quale ci sono tutti i contenuti della mia pagina al quale ho impostato height: auto.. All'interno di questo ho un altro div anchesso impostato con height: auto.
Il problema è che il secondo div che dovrebbe essere all'interno del primo sconfina in basso, non capisco perchè il div container non si adatti all'altezza del div che è contenuto in esso (probabilmente non ho capito fino in fondo il funzionamento delle proprietà dei div nei css..
Questo è il css:
Codice: 
@charset "utf-8";
/* CSS Document */
body {
	background-color:#D8F4D4;
}

#container {
	background-color:#BDECB6;
	height: auto;
	width: 950px;
	position: relative;
	top:0px;
	left: 50%;
	margin-left: -475px;
	border-radius: 10px;
	border-left: 1px solid rgba(0, 152, 116, 0.7);
	border-right: 1px solid rgba(0, 152, 116, 0.7);
}

#title {
	background-color:rgba(0, 152, 116, 0.7);
	border-radius: 10px;
	-moz-border-radius: 10px; /* firefox */
	-webkit-border-radius: 10px; /* safari, chrome */
	/*top: 10px;
	left: 10px;*/
	/*position: relative;*/
	height: 200px;
}

#logo {
	height: 150px;
	width: 363px;
	position: relative;
	top: 0px;
	left: 0px;
}
#menu1 {
	background-color:#000000;
	height: 30px;
	width: 840px;
	position: absolute;
	left: 50%;
	margin-left: -420px;
	top: 170px;
}

.menu { 
  border-radius: 10px; 
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
}

.menu  a{
	color: White;
	font-size: 25px;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
}

.menu a:hover {
	color: #BDECB6;
	font-weight: bold;
}

#titolo {
	height: 58px;
	width: auto;
	position: absolute;
	top: 230px;
	left: 50%;
	margin-left: -250px;
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
}

#testo {
	background:url(../Immagini/sfondo.png);
	padding: 5px 7px 5px 7px;
	height: auto;
	width: 700px;
	position: relative;
	top: 80px;
	left:50%;
	border: 1px;
	margin-left:-350px;
	text-align: justify;
	font-family: "Courier New", Courier, monospace;
	font-size: 15px;
}
#falegnami {
	background-image:url(../Immagini/falegnami.png);
	height: 29px;
	width: 388px;
	position: absolute;
	top: 90px;
	left: 515px;
}
#stampa {
	position: relative;
	top:75px;
	left: 22%;
	margin-left: -85px;
	width: 170px;
}

.stampa input{
	color: black;
	font-family: "Courier New", Courier, monospace;
}

div#stampa .pulsante{
	background-color:rgb(0, 152, 116);
	border:1px solid #999999;
	color:#FFFFFF;
	font-size:13px;
	padding:2px;
}
#news {
	background:url(../Immagini/sfondo.png);
	border: 1px solid #000000;
	padding: 5px 5px 5px 5px;
	position: relative;
	top: 50px;
	/*left: 720px;*/
	left: 88%;
	margin-left: -100px;
	width: 200px;
	height: 65px;
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
	text-align: center;
}
.news a{
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
}

.news a:hover{
	font-weight:bold;
	color: #FE0000;
}

e questo l'html:
Codice: 
@charset "utf-8";
/* CSS Document */
body {
	background-color:#D8F4D4;
}

#container {
	background-color:#BDECB6;
	height: auto;
	width: 950px;
	position: relative;
	top:0px;
	left: 50%;
	margin-left: -475px;
	border-radius: 10px;
	border-left: 1px solid rgba(0, 152, 116, 0.7);
	border-right: 1px solid rgba(0, 152, 116, 0.7);
}

#title {
	background-color:rgba(0, 152, 116, 0.7);
	border-radius: 10px;
	-moz-border-radius: 10px; /* firefox */
	-webkit-border-radius: 10px; /* safari, chrome */
	/*top: 10px;
	left: 10px;*/
	/*position: relative;*/
	height: 200px;
}

#logo {
	height: 150px;
	width: 363px;
	position: relative;
	top: 0px;
	left: 0px;
}
#menu1 {
	background-color:#000000;
	height: 30px;
	width: 840px;
	position: absolute;
	left: 50%;
	margin-left: -420px;
	top: 170px;
}

.menu { 
  border-radius: 10px; 
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
}

.menu  a{
	color: White;
	font-size: 25px;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
}

.menu a:hover {
	color: #BDECB6;
	font-weight: bold;
}

#titolo {
	height: 58px;
	width: auto;
	position: absolute;
	top: 230px;
	left: 50%;
	margin-left: -250px;
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
}

#testo {
	background:url(../Immagini/sfondo.png);
	padding: 5px 7px 5px 7px;
	height: auto;
	width: 700px;
	position: relative;
	top: 80px;
	left:50%;
	border: 1px;
	margin-left:-350px;
	text-align: justify;
	font-family: "Courier New", Courier, monospace;
	font-size: 15px;
}
#falegnami {
	background-image:url(../Immagini/falegnami.png);
	height: 29px;
	width: 388px;
	position: absolute;
	top: 90px;
	left: 515px;
}
#stampa {
	position: relative;
	top:75px;
	left: 22%;
	margin-left: -85px;
	width: 170px;
}

.stampa input{
	color: black;
	font-family: "Courier New", Courier, monospace;
}

div#stampa .pulsante{
	background-color:rgb(0, 152, 116);
	border:1px solid #999999;
	color:#FFFFFF;
	font-size:13px;
	padding:2px;
}
#news {
	background:url(../Immagini/sfondo.png);
	border: 1px solid #000000;
	padding: 5px 5px 5px 5px;
	position: relative;
	top: 50px;
	/*left: 720px;*/
	left: 88%;
	margin-left: -100px;
	width: 200px;
	height: 65px;
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
	text-align: center;
}
.news a{
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
}

.news a:hover{
	font-weight:bold;
	color: #FE0000;
}
In questa immagini potete vedere il problema:
Problema.jpg

Grazie in anticipo a chi mi darà una mano!!!
 
Ciao, puoi provare sostituendo la proprietà height:auto del primo elemento con overflow:hidden
 
Ho provato ma così mi taglia la pagina a un certo punto.. Devo impostare una altezza del body fissa?

EDIT
Niente anche mettendo l'altezza del body fissa rimane lo stesso problema mettendo overflow:hidden..
END EDIT
 
Ultima modifica:
No, non devi mettere l'altezza fissa a nessun elemento
fai questa prova
HTML: 
<style type="text/css">
    #container {
        width: 1000px;
        overflow: hidden;
        padding:10px 12px;
        background-color: black;
    }
    #contenuto {
        background-color: orange;
        padding:10px 12px;
    }
</style>
<div id="container">
    <div id="contenuto">
        <p>paragrafo</p>
        <p>paragrafo</p>
        <p>paragrafo</p>
        <p>paragrafo</p>
    </div>
</div>
Se provi ad aggiungere o togliere i paragrafi noterai che il div nero si adatta al contenuto del div arancione
 
Copiando il tuo esempio in un file nuovo funziona alla perfezione.. mentre se toglo la proprietà height e la sostituisco con overflow mi taglia il contenuto.. ci sto uscendo pazzo..
 
Il mio consiglio è di rifarlo.
Il codice css è davvero brutto con tutti quei position fissi.
Non vedrai mai lo stesso risultato su browser o dispositivi diversi.
La sintassi del codice html invece non è male, io mi concentrerei di più sullo studio dei css.
provalo cosi
HTML: 
<html>
    <head>
        <title>Rinnovo Produzione</title>
        <style type="text/css" >
            htmml body {
                background-color:#D8F4D4;
                text-align: center;
            }
            #container {
                background-color:#BDECB6;                
                width: 950px;
                margin:auto;
                border-radius: 10px;
                border-left: 1px solid rgba(0, 152, 116, 0.7);
                border-right: 1px solid rgba(0, 152, 116, 0.7);
                padding-bottom: 22px;
                overflow:hidden;
            }
            #title {
                background-color:rgba(0, 152, 116, 0.7);
                border-radius: 10px;
                border-radius: 10px;
                height: 200px;
            }

            #logo {
                height: 150px;
                width: 363px;
                float: left;
                margin:7px;
            }
            #menu1 {
                background-color:#000000;
                height: 30px;
                width: 840px;
                margin:auto;
                clear: both;
            }
            .menu { 
                border-radius: 10px; 
            }
            .menu  a{
                color: White;
                font-size: 25px;
                text-decoration: none;
                font-family: "Courier New", Courier, monospace;
            }

            .menu a:hover {
                color: #BDECB6;
                font-weight: bold;
            }

            #titolo {
                height: 58px;
                line-height: 58px;
                text-align: center;
                font-family: "Courier New", Courier, monospace;
                font-size: 24px;
            }

            #testo {
                background:url(../Immagini/sfondo.png);
                padding: 5px 7px 5px 7px;
                width: 700px;
                border: 1px;
                text-align: justify;
                font-family: "Courier New", Courier, monospace;
                font-size: 15px;
                margin: auto;
                background-color: #E7F8E5;
            }
            #falegnami {
                background-image:url(../Immagini/falegnami.png);
                height: 29px;
                width: 388px;
                float:right;
                margin:20px 0 0 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="title">
                <div id="logo">
                    <img src="http://forum.mrwebmaster.it/Immagini/logo.png" width="363" height="150" alt="logo" />
                </div>
                <div id="falegnami"></div>
                <div id="menu1" class="menu">		
                    <a href="index.html">-Home</a>&nbsp
                    <a href="prodotti.html">-Prodotti</a>&nbsp
                    <a href="galleria.html">-Galleria</a>&nbsp
                    <a href="chi_siamo.html">-Chi Siamo</a>&nbsp
                    <a href="dove_siamo.html">-Dove Siamo</a>&nbsp
                    <a href="contatti.html">-Contatti</a>&nbsp	
                </div>
            </div>

            <div id="titolo"><b>Rinnovamento produzione e esposizione</b></div>

            <div id="testo">
                <p>Abbiamo ampliato la nostra gamma di prodotti per quanto riguarda finestre, portefinestre e portoncini.
                    Oltre al rinnovo del classico serramento di 68mm di spessore, con doppia guarnizione, doppio vetrocamera e gocciolatoio in alluminio ora abbiamo la possibilità 
                    di realizzare i seguenti tipi di finestre:
                <ul>
                    <li>Finestra 68mm di spessore con tripla guarnizione, doppio vetrocamera e gocciolatoio in alluminio</li>
                    <li>Finestra 80mm di spessore con tripla guarnizione, triplo vetrocamera e gocciolatoio in alluminio</li>
                </ul>
                I vetricamera delle finestre sono (a meno di vostre particolari esigenze) di tipo selettivo (uno speciale vetro basso emissivo che ha effetto sia nella stagione calda 
                che durante l'inverno, consentendo di risparmiare sia sul riscaldamento in inverno che sull'eventuale condizionatore in estate), con canalina disponibile in plastica o in TPS (è un tipo
                di canalina di ultima gerazione estrusa direttamente sul bordo del vetro) in modo da diminuire la formazione di condensa sul vetro e all'interno riempiti al 90% di Gas Argon, per migliorarne
                le prestazione termiche e acustiche.
                I gocciolatoi in alluminio sono presenti sia nelle finestre che nelle porte finestre. In queste ultime lo spessore a terra del gocciolatoio è di circa 2 cm, così da poter garantire un ottima tenuta
                senza costituire un intralcio al passaggio, anche di carrozzine per disabili. Inoltre sui gocciolatoi è applicata una guarnizione in gomma per migliorarne ulteriormente la tenuta.
                Tutte queste novità le potrete trovare nella nostra nuova esposizione, completamente rinnovata per essere ancora più di vostro gradimento.
                </p>
            </div>
        </div>
    </body>
</html>
 
Grande, ora funziona alla perfezione, mi metterò a studiare le differenze tra la tua proposta e il mio vecchio codice così da capire dove sbagliavo..
Ancora un piccolo consiglio: visto che in un sito la struttura delle pagine è sempre cmq la medesima conviene avere un foglio di stile generale per tutte le pagine e poi un foglio di stile riguardante solo i contenuti oppure ripetere la struttura della pagina in ogni css?
Grazie mille x il tuo preziosissimo aiuto!!
 
io di solito uso un foglio solo per la struttura e lo richiamo in tutte le pagine, se una pagina ha bisogno di uno stile particolare ne creo uno apposta e lo includo dopo quello generale.
 
Perfetto.
Però metti caso che voglia spostare il div 'testo' un pò più in basso, posso inserire una proprietà top oppure cosa mi consigli?
 
Perfetto.
Però metti caso che voglia spostare il div 'testo' un pò più in basso, cosa mi consigli di fare, inserire una proprietà top? Grazie ancora!!
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

F
problema altezza iframe
Risposte
0
Visite
1K
jQuery
fradamma
F
felino
Problema scheda di rete: "Internet non disponibile"
Risposte
1
Visite
322
Windows e Software
alainscilly
A
voldemort
Problema in Shopify con Pixel Facebook
Risposte
1
Visite
2K
E-Commerce
m.pittini
M
F
Problema pulsante cerca record su access
Risposte
0
Visite
2K
Database
futty71
F
I
Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz-
Risposte
0
Visite
1K
HTML e CSS
Ikon
I
K
Problema form update
Risposte
2
Visite
1K
PHP
WEBLEADERS
W
O
problema con dvr dahua xvr5116
Risposte
0
Visite
2K
IP Cam e Videosorveglianza
oky74
O
S
Problema nel ciclare un json
Risposte
0
Visite
3K
Javascript
Soulfearor
S
G
Problema con Xampp
Risposte
1
Visite
1K
Web Server
GreatOtaku
G
andrea barletta
Problema con miniature comandi
Risposte
0
Visite
1K
Photoshop
andrea barletta
andrea barletta
I
problema con alice
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
K
Problema Inner join
Risposte
1
Visite
957
PHP
Kiko74b
K
F
firefox problema http
Risposte
0
Visite
2K
Linux e Software
frankz
F
N
Problema con position absolute e overflow
Risposte
4
Visite
1K
HTML e CSS
Nocciolina
N
E
Problema jquery Success
Risposte
2
Visite
2K
jQuery
marino51
marino51
L
Problema con inner join
Risposte
11
Visite
2K
PHP
marino51
marino51
K
[php] Problema con inner join
Risposte
4
Visite
2K
PHP
Kiko74b
K
E
problema selezione sfumata
Risposte
2
Visite
1K
Photoshop
chrdam
C
K
[PHP] Problema con variabili concatenate.
Risposte
1
Visite
1K
PHP
thanatos
T
A
Problema filtro fluidifica Photoshop
Risposte
1
Visite
3K
Photoshop
WmbertSea
WmbertSea
Alto Basso