Adattare un div allo schermo ad una distanza FISSA dal bordo

**SimoVinci** · 02-05-2008, 22:14

Ciao a tutti.

Mi trovo di fronte ad un problema che mi sta facendo fondere le meningi

Voglio costruire un sito che si adatta per larghezza a qualsiasi risoluzione.
Il container principale è costituito da un div con width:100%;.

Sulla parte destra ho intenzione di lasciare il logo che ha una dimensione fissa di 280px

Il problema nasce qua, se nel div#container metto questa regola:

codice:

div#container {
   position:absolute;
   width:100%;
   right:280px;
}

il sito non sta nello schermo!

Come faccio ad ottenere la regola qui sotto specificata???

codice:

div#container {
   position:absolute;
   width: 'il più possibile senza sbordare fuori dallo schermo';
   right:280px;
}

Spero di essere stato abbastanza chiaro

**Mich_** · 05-05-2008, 10:49

IO eviterei di usare i posizionamenti: in linea di massima complicano la vita.

Il tuo width: 100% a cosa si riferisce? Per poterlo usare e` necessario che il blocco che contiene quello che stai formattando abbia una larghezza definita (eventualmente anche in %), altrimenti il 100% si riferisce a qualcosa di non formattato e perde di significato.

Altra cosa: tu sposti il tuo blocco verso sinistra (con il right: ...) a quel punto il tuo blocco non puo` essere largo 100% del blocco genitore, dato che ti serve spazio sulla destra.

Comunque prova con questo esempio:

codice:

html, body {
  width: 100%;
  background: red;
}
#container {
  width: 100%;
  background: green;
}

**SimoVinci** · 05-05-2008, 14:55

Ciao.

Il mio 100% era riferito alla larghezza massima dello schermo e giustamente mi hai detto che anche body e html devono essere definiti.

Il tuo esempio funziona, mi genera
un div lungo come la pagina ,

ma quello che vorrei ottenere è
un div lungo come la pagina MENO 280 pixel sottratti dalla parte destra.

Mi piacerebbe trovare una soluzione senza ricorrere a javascript.

**Mich_** · 05-05-2008, 15:25

E non potresti fare due colonne, invece?
La prima colonna larga 280px con float:right e la seconda con un margine destro equivalente?

Ci sono vari esempi di strutture a colonne tra i layout pronti (trovi i link tra i "link utili" del forum).
Di solito si lascia una colonna stretta a sinistra, per cui forse non trovi tanti esempi con la colonna fissa a destra, ma la cosa si puo` rovesciare, per cui puoi vedere anche gli esempi con la colonna fissa a sinistra.

**SimoVinci** · 05-05-2008, 23:34

Grazie del consiglio

Con la sezione link utili:
http://forum.html.it/forum/showthrea...readid=1013463

Ho trovato la soluzione!

La posto per chiunque abbia lo stesso problema:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Finalmente</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: 0;
}

#container {
  position:relative;
  background-color:yellow;
  text-align:left;
  padding:0;
}

#col-sx{
  position:relative;
  margin-right:280px;
  background-color:red;
  padding-bottom:10px;
}

#col-dx{
  position:absolute;
  right:0;
  top:0;
  width:280px;
  background-color:green;
  text-align:left;
}
</style>
</head>
<body>
<div id="container">
  <div id="col-sx">
    COLONNA SINISTRA
che si adatta
a qualsiasi
risoluzione
  </div>
  <div id="col-dx">
    COLONNA DESTRA
con dimensione
fissa a 280px
   </div>
</div>
</body>
</html>

Grazie ancora, alla prossima

Discussione: Adattare un div allo schermo ad una distanza FISSA dal bordo

Strumenti discussione

Ricerca discussione

Visualizza

Adattare un div allo schermo ad una distanza FISSA dal bordo

Permessi di invio