due box allineati in orizzontale

[Antonio46]

Salve, stò smanettando con HTML ed i CSS, ma con scarsi risultati!! Mi appoggio molto a questo sito per risolvere i problemi più semplici, con successo.
Ora però non trovo soluzione ad una cosa: vorrei creare due box allineati in orrizontale all'interno di un box generale. Potrei inserire o due testi indipendenti oppure un testo nel primo e una foto nel secondo.
Il box generale l'ho creato:

.BloccoGen{                /* riquadro generale*/
    width:750px;                  /*  lunghezza area ---*/
    padding-left:10px;        /* distanza tra la cornice interna e quella esterna*/        
    border:1px solid black;                    
    border-color:#000;  
    border-radius: 10px;
    background-color:#EBEBEB;/*colore di fondo 90%*/
}

il primo box interno l'ho creato:

.BloccoNews1{           /*---   BloccoNesws nella pagina Home ----*/
    width:450px; 
    height:80px;                   /*  altezza area del singolo box*/
    padding-left:20px;                /* distanza del testo dal bordo*/
    border: 2px solid black;      /* disegna il bordo*/
    border-color:#060;            /* colora il bordo*/
    background-color:#F5F5F5;        /*colore di fondo 95%*/
    border-radius: 10px;          /* bordi arrotondati */
  -moz-border-radius: 10px;       /* per firefox */
  -webkit-border-radius: 10px;    /* per safari, chrome */
    box-shadow:10px 10px 5px #dedede;  /* ombreggiatura esterna*/  
    padding:10px;
    margin:10px 0px 10px 0px;    /*margin-bottom:10px;  margin-top:10px;*/
}

Ora non so come creare il secondo box allineato con il primo; questo box dovrà avere:
width:270px; (a questa misura si aggiungono i due valori di padding sinistro e destro di 10px)
height:80px; /* altezza area del singolo box*/
Mi potete aiutare?
Grazie
Antonio

[KillerWorm]

Ciao e benvenuto, quello che vuoi fare può essere risolto in vari modi.
Per il momento potresti fare qualche prova con la proprietà float.

Posso consigliarti di dare uno sguardo tra i link utili CSS, al capitolo 2 sotto la voce "Float e clear" puoi trovare diverse informazioni e materiale interessante.

[Enzo SIMONELLI]

E in questo caso puoi assegnare float: left; a uno e float: right; all' altro, ma in altri casi "fa il trucco" assegnare left o right ad entrambi; e anche qui andrebbe bene.

L' alternativa è posizionare come assoluti i due div interni: fai attenzione che allora il div contenitore non può essere "normale" (position: static ma deve essere un position: absolute; anche lui o position: relative; altrimenti i due div filgli semplicemente ne escono fuori.

<style>
.BloccoGen{ /* riquadro generale*/
width:750px; /* lunghezza area ---*/ 
height:125px;
padding-left:10px; /* distanza tra la cornice interna e quella esterna*/ 
border:1px solid black; 
border-color:#000; 
border-radius: 10px;
background-color:#EBEBEB;/*colore di fondo 90%*/
position: absolute; top: 77px; left: 20%;
}
.BloccoNews1, .BloccoNews2{
padding-left:20px; /* distanza del testo dal bordo*/
border: 2px solid #060; /* disegna e colora il bordo*/
border-color:; /* */
border-radius: 10px; /* bordi arrotondati */
-moz-border-radius: 10px; /* per firefox */
-webkit-border-radius: 10px; /* per safari, chrome */
box-shadow:10px 10px 5px #dedede; /* ombreggiatura esterna*/ 
padding:10px;
margin:10px 0px 10px 0px; /*margin-bottom:10px; margin-top:10px;*/
position: absolute;
}
.BloccoNews1 { /*--- BloccoNesws nella pagina Home ----*/
background-color:#F5F5F5; /*colore di fondo 95%*/
width:450px; 
height:80px;
}
.BloccoNews2 {
background-color:#F5F500; /*colore di fondo 95%*/
opacity: 0.6;
width:270px; 
height:80px;
right: 10px;
}
</style>

<div class="BloccoGen">

 <div class="BloccoNews1"></div>
 <div class="BloccoNews2"></div>

</div>

Al destro occorre il position: absolute; con il right: 10px; che riprende il padding del div genitore.

In ogni caso, e strada che seguirai, ti facilita il fatto che puoi fare DIV a dimensioni fisse in pixel.
I guai iniziano quando occorrono DIV che si espandono a seconda del contenuto, come i vecchi DIV "normali". E io allora me ne torno senza vergogna alle tanto schifate TABLE.

[Vincent.Zeno]

spostiamo in css