div affiancati

A

Altutto

Utente Attivo
30 Set 2013
262
0
16
stubborn.altervista.org
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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;
            }
 
A

Altutto

Utente Attivo
30 Set 2013
262
0
16
stubborn.altervista.org
Grazie, ora i div sono affiancati, però uno si sovrappone ad un altro che c'è sopra :(
Cattura.PNG
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
e il terzo qual'è ? posta il css se prende tutta la pagina dovrebbe avere un width:100%;
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
quello in bianco su sfondo blu
Clicca per allargare...
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>
 
A

Altutto

Utente Attivo
30 Set 2013
262
0
16
stubborn.altervista.org
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
Cattura.PNG
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
si allinea a sinistra per la proprietà float:left;
per interrompere il flusso a sinistra puoi assegnare ai bottoni la proprietà clear:both;
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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?
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
felino Div affiancati senza DIV padre HTML e CSS 1
M allineare due box(div) affiancati HTML e CSS 19
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5

Discussioni simili

Alto Basso