Allineare 2 div in orizzontale

[Manson]

Come si fa?
Di default li mette uno sotto l'altro, come faccio a metterne uno a fianco all'altro?

[salasir]

Prova a guardare qui:
Far coesistere 2 div opposti sulla stessa riga
CSS pratici

[carlo19706]

Salve,
un altra soluzione non sffruttando i margini solamente potrebbe essere: float:left/right a seconda di vove vuoi fare flottare l'elemento che segue (qualsiasi elemento anche un

contenente testo)
Qualcosa di + approfondito se non mi sono spiegato bene lo troveresti sicuramente on line
Ciao

[Manson]

Originariamente inviato da salasir
Prova a guardare qui:
Far coesistere 2 div opposti sulla stessa riga
CSS pratici

Ti ringrazio per il suggerimento, son riuscito ad allineare i div, c'è solo un piccolo problema ora, che il contenuto sfora e lo sfondo non lo segue, per spiegarmi meglio ecco il link:
http://www.padremanson.com/sito/index.php

Di seguito il codice, in particolare nel CSS la voce height: 40em; di #containerbox regola l'altezza dello sfondo, solo che se lo metto su auto; il box diventa piccolissimo e cmq sfora. Non so come settare per fare in modo che il contenuto rimanga nel box e non lo superi

XHTML

<div id="contentbg">
  <div id="containerbox">
    <div id="boxup"></div>
    <div class="sin">
      <h3>[img]images/img_aboutme.gif[/img]</h3>
      <h2>
       <h1>
        Prova
        Prova 2   
        Prova 3
        Prova 4
       </h1>
      </h2>
    </div>
    <div class="des">
      <h3>[img]images/text_aboutme.gif[/img]</h3>
	  <h2>Lorem Ipsum Lorem Ipsum Lorem...</h2>
    </div>
  </div>
</div>

CSS:

/*Box Cenrtrale */
#contentbg { 
   margin: 0 auto;
   padding: 0;
   width: 752px; 
   background: url("images/boxcenterbg.gif");
   background-repeat: repeat-y;
}
#containerbox  {/* il contenitore generale */
  margin:0 auto;
  padding:0;
  background-image: url(images/boxcenterdown.gif);
  background-position:bottom;
  background-repeat:no-repeat;
  height: 40em;
}

#boxup {
  width:100%;
  background: url("images/boxcenterup.gif") repeat-x;
  margin: 0px;
  padding: 0px;
}


.sin {
   margin:0;
   padding:0;
   width:180px;
   background:transparent;
   float:left;
}
.sin h3{
   margin:0 0 5 0px;
   padding:0 0 0 10px;
   font-size: 1.2em;
   color:#fff;
}
.sin h2{
   margin: 0 auto;
}

.sin h1 a{
   color: #888888;
	margin: 0 0 0 5px;
   background-color: #FFFFFF;
   padding: 2px;
   padding-left: 3px;
   display: block;
   border-bottom: 1px solid ;
   font: 10px Verdana, sans-serif;
   font-weight: bold;
   text-decoration: none;
   text-align: left;
}

.sin h1 a:hover{
   background-color: #888888;
   color: #FFFFFF;
   text-decoration: none;
}

.des{
   margin:0;
   padding:0;
   width:572px;
   background:transparent;
   float:right;
   text-align:left;
}
.des h3{
   margin:0;
   padding:0 10px 0 10px;
   color:#000000;
}
.des h2{
   padding:0px 10px 0 10px;
   font-size: 1.0em;
   font-weight: lighter;
}

[salasir]

Una domanda. Devi proprio utilizzare le immagini definite come sfondo per ottenere il riquadro?
Perchè io ho provato a mettere un border: #eee 2px ridge; nell'ID contentbg e ad eliminare del tutto gli ID containerbox e boxup
ed ottengo pressochè lo stesso risultato senza problemi di dimensioni e senza immagini.

[Manson]

Ti ringrazio per la risposta.
Mi rendo conto che usare le immagini incasini la cosa, ma vorrei usarle per mantenere questo effetto ombrato attorno al bordo.
Non c'è modo di risolvere la cosa senza demolire le immagini?

[Manson]

Originariamente inviato da salasir
Una domanda. Devi proprio utilizzare le immagini definite come sfondo per ottenere il riquadro?
Perchè io ho provato a mettere un border: #eee 2px ridge; nell'ID contentbg e ad eliminare del tutto gli ID containerbox e boxup
ed ottengo pressochè lo stesso risultato senza problemi di dimensioni e senza immagini.

Scusa potresti indicarmi come hai fatto gentilmente? Perché a sto punto rinuncio alle immagini...

[Manson]

Ho aggiornato il codice, dà lo stesso problema. In effetti ora è più pulito il codice ma cmq con FF il contenuto sfasa, per piacere chi mi svela l'arcano?

XHTML

<div id="contentbg">
    <div class="sin">
      <h3>[img]images/img_aboutme.gif[/img]</h3>
      <h2>Prova</h2>
      <h2>Prova 2</h2> 
      <h2>Prova 3</h2>
      <h2>Prova 4</h2>
     </div>
    <div class="des">
      <h3>[img]images/text_aboutme.gif[/img]</h3>
	  <h2>Lorem Ipsum Lorem Ipsum...</h2>
    </div>
</div>

CSS

/*Box Cenrtrale */
#contentbg { 
   margin: 0 auto;
   padding: 0;
   width: 752px; 
   background: url("images/boxcenterbg.gif");
   background-repeat: repeat-y;
	border-top: #888888 1px solid;
	border-bottom: #888888 1px solid;
	height: 40em;
}

.sin {
   margin:0;
   padding:0;
   width:180px;
   background:transparent;
   float:left;
}
.sin h3 {
   margin:0 0 5 0px;
   padding:0 0 0 10px;
   font-size: 1.2em;
   color:#fff;
}
.sin h2 {
   margin: 0 auto;
}

.sin h2 a{
   color: #888888;
	margin: 0 0 0 5px;
   background-color: #FFFFFF;
   padding: 2px;
   padding-left: 3px;
   display: block;
   border-bottom: 1px solid ;
   font: 10px Verdana, sans-serif;
   font-weight: bold;
   text-decoration: none;
   text-align: left;
}

.sin h2 a:hover{
   background-color: #888888;
   color: #FFFFFF;
   text-decoration: none;
}

.des{
   margin:0;
   padding:0;
   width:572px;
   background:transparent;
   float:right;
   text-align:left;
}
.des h3{
   margin:0;
   padding:0 10px 0 10px;
   color:#000000;
}
.des h2{
   padding:0px 10px 0 10px;
   font-size: 1.0em;
   font-weight: lighter;
}

#footer {
   clear: both;
	margin: 2px;
	padding: 2px;
	font-size: 75%;
}

#footer a {
	color: Red;
	text-decoration: none;
}

acronym {
	font-style:italic;
	border-bottom: 1px dotted #888888;
	cursor: help;
}

a {
	color: Blue;
	text-decoration: none;
}

a:hover{	
	text-decoration: underline;
}

link: www.padremanson.com/sito

[salasir]

Scusa il ritardo ma hai risposto che stavo uscendo dall'ufficio
La prova che avevo fatto era così (non ho il codice esatto che ho in ufficio ma se hai problemi domani lo controllo)

#contentbg { 
   border: #eee 2px ridge; 
   margin: 0 auto;
   padding: 0;
   width: 752px; 
   background-repeat: repeat-y;
	border-top: #888888 1px solid;
	border-bottom: #888888 1px solid;
	height: 40em; tutto questo (in arancio)via!
}

[Manson]

niente non va, se puoi dare una controllata quando puoi, mi faresti un piacere. grazie!