input, display: block und die Breite

[iblue]

N'Abend,

Ich habe jetzt bestimmt eine Stunde erfolglos an folgendem Konstrukt gebastelt:

  
<div>  
  <select><option>Irgendwas</option></select>  
  <input value="Nochwas" />  
</div>  

  
div {  
  width: 500px;  
}  
  
select {  
  display: block;  
  float: left;  
}  
  
input {  
  display: block;  
}  

Das ergibt -- im Firefox 3.0 -- folgendes:

+-----------------------<div>--------------------+
|+------+ +----------------+                     |
||select| |input           |                     |
|+------+ +----------------+                     |
+------------------------------------------------+

Sollte sich das input nicht wie ein block-Element verhalten und sich auf die volle verfügbare Breite ausdehnen?
Lässt sich das irgendwie bewerkstelligen?
Idealerweise ohne das input in ein <div> einzubetten und dann auf width: 100% zu setzen?

Grüße,
iblue.

[ChrisB]

Hi,

+-----------------------<div>--------------------+
|+------+ +----------------+                     |
||select| |input           |                     |
|+------+ +----------------+                     |
+------------------------------------------------+

Sollte sich das input nicht wie ein block-Element verhalten und sich auf die volle verfügbare Breite ausdehnen?

Nein. INPUT ist ein replaced element, und dafür gibt es eigene Berechnungsvorschriften für width.
http://www.w3.org/TR/CSS21/visudet.html#block-replaced-width

Lässt sich das irgendwie bewerkstelligen?

Warum hast du das SELECT gefloatet?
Wäre es eine Alternative, beiden eine Breite in Prozent zu geben?

MfG ChrisB

[j.j.]

Hallo,

Idealerweise ohne das input in ein <div> einzubetten und dann auf width: 100% zu setzen?

Wiso in ein <div> einbetten?

  
select {  
  display:block; width:100%;  
  float: left;  
}  
  
input {  
  display: block; width:100%; /* ggf.: */ -moz-box-sizing:border-box; box-sizing:border-box;  
}

j.j.