- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Lavorare con dimensioni espresse in percentuali e in pixel
-
Lavorare con dimensioni espresse in percentuali e in pixel
ho un contenitore che deve occupare tutto lo spazio disponibile di dimensione ignota; all'interno altri 2 div: uno a sinistra di dimensione fissa espressa in px e l'altro a destra che deve occupare tutto lo spazio rimanente.
Come faccio a far si che quest'ultimo di adatti ad occupare tutto quello spazio?<div style="width:100%>
<div style="float:left;width:200px">contenuto di larghezza fissa</div>
<div style="float:right;">contenuto di larghezza tale da occupare tutto lo spazio disponibile</div>
</div>lavorare tutto in % o px sarebbe penalizzante;
non esiste qualche escamotage?
-
Una cosa cosi intendi?
[PHP]
<html>
<head>
<title>test</title>
<script type="text/javascript">
</script>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
text-align:left;
}
#contenitore
{
width:100%;
margin:0px;
padding:0px;
}
#sinistro
{
background:#D4FFFF;
width:200px;
height:500px;
margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;
}
#destro
{
background:#7FFF2A;
width:100%;
height:500px;
margin:0px;
padding:0px 0px 0px 210px;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="sinistro">SINISTRO</div>
<div id="destro">DESTRO</div>
<div style="clear:both"></div>
</div>
</body>
</html>
[/PHP]
-
grazie per la risposta, ma la soluzione funziona su ie8, ma non su firefox e chrome in quando il contenitore di destra è largo quanto il contenitore padre e viene visualizzata la scrollbar orizzontale
-
E cosi ora?
Forse era il width:100% sul destro.[PHP]
<html>
<head>
<title>test</title>
<script type="text/javascript">
</script>
<style type="text/css">
html,body
{
margin:0px;
padding:0px;
text-align:left;
}
#contenitore
{
margin:0px;
padding:0px;
}
#sinistro
{
background:#D4FFFF;
width:200px;
height:500px;
margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;
}
#destro
{
background:#7FFF2A;
height:500px;
margin:0px;
padding:0px 0px 0px 210px;
}
</style>
</head>
<body>
<div id="contenitore">
<div id="sinistro">SINISTRO</div>
<div id="destro">DESTRO</div>
<div style="clear:both"></div>
</div>
</body>
</html>
[/PHP]
-
l'ho applicato al mio caso è sembra funzionare perfettamente!
riassumendo l'escamotage consiste nell'applicare il "position:absolute" all'elemento di sinistra e spostare quello di destra con il padding e il margin.
La grafica non è (ancora) il mio mestiere: ne faccio tesoro ... grazie mille e buona serata.
-
Mi è venuta in mente questa come idea.
Naturalmente se ci sono altri interventi attendiamo anche quelli che ne facciamo tesoro!
