Larghezza ed affiancamento di <div>

**DeltaElectronic** · 04-03-2016, 03:15

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

**carlomarangoni** · 04-03-2016, 11:04

La prossima volta ti invito a postare il codice con il suo tag [code]
Grazie

Questo è il codice funzionante come tu vuoi:

codice:

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


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


#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 style="clear:both;">
&nbsp;
</div>


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

Discussione: Larghezza ed affiancamento di <div>

Strumenti discussione

Ricerca discussione

Visualizza

Larghezza ed affiancamento di <div>

Permessi di invio