[CSS - contiene codice] Comportamento assurdo...

**tsunamin** · 21-04-2004, 21:19

E' tutto il giorno che ci perdo la testa...
In pratica voglio usare dei margini impostati in % su un <div> e all'interno di esso ho altri due <div> affiancati in modo da creare due colonne.
Ora ho assegnato al primo <div> una percentuale di width e al secondo il complementare per arrivare a 100%.
Quella rogna di IE invece me lo butta a capo.. ma la cosa ASSURDA è che in un altro esempio dove ho usato stesso metodo NON LO FA.

Sto impazzendo
Help pls..

Caso funzionante
Html:

codice:

<html>
<head>
<link rel="stylesheet" href="style_ok.css" type="text/css">
<title>prova funzionante</title>
</head>
<body>
<div id="main">
 <div id="top">
  Alto
 </div>
 <div id="central">
  <div id="centralSx">
   Sinistra
  </div>
  <div id="centralDx">
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
  </div>
 </div>
 <div id="bottom">
  Basso
 </div>
</div>
</body>
</html>

Css:

codice:

html {
  margin: 0px;
}

body {
  background-color: #000000;
  text-align: center;
}

#main {
  background-color: #ffffff;
  position: relative;
  top: 2px;
  left: 0px;
  width: 762px;
  height: 500px;
  margin: 0px auto;
  text-align: left;
  font-size: 10pt;
  font-family: Arial, Helvetica;
}

#top {
  height: 100px;
  background-color: #dddddd;
}

#central {
  height: 350px;
  margin-left: 5%;
  margin-right: 5%
}

#centralSx {
  float: left;
  width: 30%;
  height: 350px;
  background-color: #bbbbbb;
}

#centralDx {
  float: left;
  width: 70%;
  height: 350px;
  background-color: #999999;
  text-align: justify;
}

#bottom {
  height: 50px;
  background-color: #777777;
}

Caso NON funzionante
Html:

codice:

<html>
<head>
<link rel="stylesheet" href="style_no.css" type="text/css">
<title>prova non funzionante</title>
</head>
<body>
<div id="main">
 <div id="top">
  Alto
 </div>
 <div id="central">
  <div id="centralSx">
   <div id="menu_login">
    <div id="menu_testo">testo testo testo testo testo</div>
    <div id="menu_row">
     <div id="menu_column_left">
      abcd
     </div>
     <div id="menu_column_right">
      efgh
     </div>
    </div>
   </div>
  </div>
  <div id="centralDx">
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo 
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo 
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
   un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo un po' di testo
  </div>
 </div>
 <div id="bottom">
  Basso
 </div>
</div>
</body>
</html>

Css:

codice:

html {
  margin: 0px;
}

body {
  background-color: #000000;
  text-align: center;
}

#main {
  background-color: #ffffff;
  position: relative;
  top: 2px;
  left: 0px;
  width: 762px;
  height: 600px;
  margin: 0px auto;
  text-align: left;
}

#main {
  font-size: 8pt;
  font-family: Verdana, Geneva, Helvetica, Arial;
  color: #333333;
}

#top {
  height: 100px;
  background-color: #eeeeee;
}

#central {
  height: 450px;
}

#centralSx {
  float: left;
  width: 212px;
  height: 450px;  
  background-color: #dddddd;
  overflow: auto;
}

#centralDx {
  float: left;
  width: 550px;
  height: 450px;  
  background-color: #cccccc;
  text-align: justify;
  overflow: auto;
}


#bottom {
  height: 50px;
  background-color: #bbbbbb;
}

#menu_login {
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #aaaaaa;
}

#menu_row {
  margin-left: 5%;
  margin-right: 5%;
  background-color: #999999;
}

#menu_column_left {
  width: 30%;
  float: left;
  text-align: left;
  font-weight: bold;
  background-color: #888888;
}

#menu_column_right {
  width: 70%;
  float: left;
  text-align: right;
  background-color: #777777;
}

**Jerry Masslo** · 22-04-2004, 00:02

be' non mi pare proprio identico, nel secondo c'è un annidamento selvaggio, non so come riesci a tenere il conto, è una matriosca praticamente.

Se aggiungi width:100% a #menu_row

come viene?

Discussione: [CSS - contiene codice] Comportamento assurdo...

Strumenti discussione

Ricerca discussione

Visualizza

[CSS - contiene codice] Comportamento assurdo...

Permessi di invio