Buongiorno,
Mi sto dibattendo in un problema ad affiancare due box indicati con <div></div>.....
Il fatto è che vorrei dare ad entrambi una specifica larghezza (ad esempio il 30% del loro container) ma se faccio questo, i due box non vengono visualizzati affiancati, devo specificare l'ampiezza unicamente di uno dei due.
Come posso rimediare ?
Qui sotto il codice html; come vedete voglio affiancare i box "sx""dx"; ad entrambi ho dato un'ampiezza del 30% ma non vengono affiancati, mentre i box"sx1""dx1" vengono sì affiancati ma solo "dx1" ha un'ampiezza del 30% (ma inizia nello stesso punto in cui inizia anche "sx1").
Come posso fare che vengano visualizzati sulla stessa riga, entrambi con una dimensione relativa del 30% rispetto al loro contenitore principale ?
Il listato è riportato qui sotto.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>


#dx {
width:30%;
background-color: yellow;
}


#sx{
width:30%;
background-color: red;
float:left;
}


p {
margin: 0;
}


#dx1 {
width:30%;
background-color: yellow;
}


#sx1 {
background-color: red;
float:left;
}


#dx2 {
width:30%;
background-color: yellow;
}


#sx2 {
background-color: red;
float:left;
}


</style>
</head>


<body>
<div id="sx">
<p>Sinistra</p>
</div>
<div id="dx">
<p>destra</p>
</div>


<div id="sx1">
Sinistra 1
</div>
<div id="dx1">
destra 1
</div>
</body>
</html