tre div

**Buzzz** · 23-11-2009, 19:29

mi porto avanti questo problema ormai da giorni.. e non ho ancora trovat la soluzione..

io ho 3 div, uno centrare, uno a destra e uno a sinistra..
i div laterali sono larghi 20px ciascuno.. il div centrale deve essere largo quanto + lo spazio tra i due div.. non so se mi spiego..
in pratica il centrale sta tra i due div e deve occupare tutto lo spazio restante.. e non deve sottoporsi ai due div.. cosa che accade se faccio in questo modo:

html

codice:

	<div id="cont_shadow_top">
    	<div class="left_cont_shadow_top">
        L
        </div>
        <div class="right_cont_shadow_top">
        R
        </div>
        <div class="center_cont_shadow_top">
        C
        </div>
        </div>

css

codice:

#cont_shadow_top{
overflow:auto;
width:;
height:21px;
}
.left_cont_shadow_top{
float:left;
width:60px;
height:100%;
background:url(../img/ly/shad_top.png) top no-repeat;
}
.right_cont_shadow_top{
float:right;
width:60px;
height:100%;
background:url(../img/ly/shad_top.png) 0 0 no-repeat;
background-position:0px -21px;
}
.center_cont_shadow_top{
width:200px;
height:100%;
background:#CCFFFF url(../img/ly/shad_top.png) 0 0 no-repeat;
background-position:0px -42px;
}

grazie a tutti!!

**bionicoz** · 24-11-2009, 00:21

Esempio qui

**Buzzz** · 27-11-2009, 18:42

ho visto che qui i div esterni hanno delle misure fisse di altezza..
questo esempio funziona anche se non ho misure fisse? cioè devo far si che i div laterali siano alti quanto il container in cui sono inseriti..
una specie di width:100%; ...

**Labtech** · 30-11-2009, 09:57

Se non erro, nel div centrale imposta:

codice:

 margin-left: auto;
 margin-right: auto;

Ps: se inserisci nel div centrale width:200px occuperà solo quello spazio quindi se vuoi occupi tutto lo spazio rimanente toglilo

**Buzzz** · 30-11-2009, 14:22

Originariamente inviato da Labtech
Se non erro, nel div centrale imposta:

codice:

 margin-left: auto;
 margin-right: auto;

Ps: se inserisci nel div centrale width:200px occuperà solo quello spazio quindi se vuoi occupi tutto lo spazio rimanente toglilo

ok grazie.. provo a fare cosi..
ma in questo modo il div centrale non si sottopone ai due div laterali vero?

**Labtech** · 30-11-2009, 14:34

Se i laterali hanno i float impostati no

Ps esempio completo postato qualche post + sopra da un altro utente, basta vai al link e guardi il sorgente

Originariamente inviato da bionicoz
Esempio qui

**Buzzz** · 30-11-2009, 14:43

ma li i div laterali hanno altezza fissa..
quindi non sapevo se togliendo l'altezza funzionasse oppure no..

comunque ora provo con:

margin-left: auto;
margin-right: auto;

e vi faccio sapere..

**Buzzz** · 30-11-2009, 14:56

niente..
qusto è quello che ho modificato..

HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="style.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

	<div id="cont_shadow_top">
    	<div class="left_cont_shadow_top">
        L
        </div>
        <div class="right_cont_shadow_top">
        R
        </div>
        <div class="center_cont_shadow_top">
        C
        </div>
    </div>

</body>
</html>

CSS

codice:

#cont_shadow_top{
overflow:auto;
width:;
height:21px;
}
.left_cont_shadow_top{
float:left;
width:60px;
height:100%;
background:#3F0;
}
.right_cont_shadow_top{
float:right;
width:60px;
height:100%;
background:#900;
}
.center_cont_shadow_top{
width:;
height:100%;

 margin-left: auto;
 margin-right: auto;

background:#CF0;
}

il div centrale si sottopone ai due div laterali..
non cè un modo per non far sottoporre qualcosa a un div?

**Labtech** · 01-12-2009, 09:30

Come da esempio di bionico:

codice:

div#sinistra {
    float: left;
    width: 150px;
    background-color: red;
    height:100%;
}
div#destra {
    float: right;
    width: 150px;
    background-color: green;
    height:100%;

}
div#centro {
    text-align: justify;
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
    height:100%;

Discussione: tre div

Strumenti discussione

Ricerca discussione

Visualizza

tre div

Permessi di invio