div affiancati

Altutto · 30 Dic 2013

Buonasera a tutti,
sto provando ad affiancare due div usando CSS, ma non riesco ad ottenere alcun risultato.
Ecco il codice css dei due div:

Codice:

.box{position:absolute;
  width:59%;
  left:2%;
  margin-top: 25px;
    font-size: 21px;
   background: white;
}
.news{position:absolute;
  width:36%;
  left:62%;
  margin-top: 25px;
    font-size: 21px;
   background: white;
}

Sapreste aiutarmi?

criric · 30 Dic 2013

Ciao, per affiancare degli elementi di blocco come i div usa la proprietà float

Codice:

.box{
                width:59%;
                float:left;
                margin-top: 25px;
                font-size: 21px;
                background: white;
            }
            .news{
                width:36%;
                float:left;
                margin-top: 25px;
                font-size: 21px;
                background: white;
            }

Altutto · 30 Dic 2013

Grazie, ora i div sono affiancati, però uno si sovrappone ad un altro che c'è sopra

criric · 30 Dic 2013

e il terzo qual'è ? posta il css se prende tutta la pagina dovrebbe avere un width:100%;

Altutto · 30 Dic 2013

Il terzo div non ha nessuna proprietà di stile, ha classe chiamata "title" e contiene solo il titolo della pagina (quello in bianco su sfondo blu)

criric · 30 Dic 2013

quello in bianco su sfondo blu

login in pratica?
digli che deve essere lungo tutta la pagina e alto quel che ti basta e pvviamente nel flusso della pagina deve essere inserito prima degli altri due

HTML:

<div class="title"></div>
<div class="new"></div>
<div class="box"></div>

Altutto · 30 Dic 2013

Sì, "login"

Ho specificato

Codice:

.title{width:100%;
height:3cm;}

E ora funziona (lo avevo messo in mezzo agli altri due XD), grazie mille

Ora avrei un altro problemino: ho alcune pagine (non quella di cui ho fatto lo screen) in cui ci sono più div con classe "box", e viene fuori un pasticcio: il primo di essi viene affiancato a quello con classe "news", gli altri invece cominciano a partire dal margine sinistro, come se non avessi definito nessuna regola, e i bottoni vanno dove vogliono XD

criric · 30 Dic 2013

si allinea a sinistra per la proprietà float:left;
per interrompere il flusso a sinistra puoi assegnare ai bottoni la proprietà clear:both;

Altutto · 31 Dic 2013

Grazie, per i bottoni farò così

invece, per il secondo div "box", come posso far sì che stia sotto al primo?

criric · 31 Dic 2013

dai un occhiata a questo schema

HTML:

<html>
    <head>
        <title>Schema</title>
        <meta charset="UTF-8">
        <style>
            html body {
                background-color: #111A66;   
                text-align: center;             
            }
            .container {
                width: 1024px;
                margin: auto;
                overflow: hidden;
            }
            .title {
                width:100%;
                background-color: #FFF;
                font-size:2.2em;
                padding: 12px 0;
                font-weight: bold;
            }
            .news {
                width: 600px;
                min-height: 400px;
                background-color: #FFF;
                float: left;
                margin-top:4px;
            }
            .box {
                width: 420px;
                min-height: 400px;
                background-color: #FFF;
                float: right;
                margin-top:4px;
            }
            .pulsanti {
                width: 420px;
                min-height: 400px;
                background-color: #FFF;
                float: right;
                margin-top:4px;
            }
            .both {
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="title">Titolo</div>
            <div class="news">News</div>
            <div class="box">Box1</div>
            <div class="box">Box2</div>
            <div class="both"></div>
            <div class="pulsanti">Pulsanti</div>
        </div>        
    </body>
</html>

lo volevi cosi?

Altutto · 31 Dic 2013

Sì, esattamente

grazie mille

Cerca

Cerca

div affiancati

Altutto

Utente Attivo

criric

Super Moderatore

Altutto

Utente Attivo

criric

Super Moderatore

Altutto

Utente Attivo

criric

Super Moderatore

Altutto

Utente Attivo

criric

Super Moderatore

Altutto

Utente Attivo

criric

Super Moderatore

Altutto

Utente Attivo

Discussioni simili