Axel Richter: float:right und max-width

Beitrag lesen

SELF-Forum

float:right und max-width

Axel Richter
+1 Informationen zu den Bewertungsregeln

Hallo,

  1. Ja ich weiss: das viele Javascript-Geraffel ist unnötig, böse und in diesem Fall aber gewollt und nötig.

Warum "in diesem Fall aber gewollt und nötig"? Mal davon abgesehen, dass Dein DIV mit display:none so gar nicht zu sehen wäre.

  1. Worauf es mir ankommt: Das div soll seine Breite dynamisch bestimmen bis zu einem gewissen Grenzwert der über max-width bestimmt wird. (Ja - ich weiss: kann der IE nicht. Passt schon) Der Button im Div (closebtn) soll aber rechts stehen. Darum habe ich ihm das CSS float:right; verpasst. Dummerweise wird nun aber immer der Grenzwert als Breite für das div verwendet.

Das kann ich nicht bestätigen. Folgendes:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
img.closebtn{  
 float:right;  
}  
div.multiselect{  
 position:absolute;  
 top:0px;  
 max-height:90%;  
 max-width:300px;  
 overflow:auto;  
 border-width:2px;  
 border-style:inset ;  
 background-color:white;  
 padding:3px;  
}  
</style>  
</head>  
<body>  
<div class="multiselect" name="multiselectdiv">  
  <input type="checkbox" class="checkbox" name="Test1">  
  <span class="check"> Test1 </span>  
  <img class="closebtn" src="duke.gif"><br>  
    <input type="checkbox"  class="checkbox" name="Test2">  
    <span class="check">  
      Test2  
    </span><br>  
    <input type="checkbox"  class="checkbox" name="Test3">  
    <span class="check">  
      Test3  
    </span><br>  
    <input type="checkbox"  class="checkbox" name="Test4">  
    <span class="check">  
      Test4  
    </span><br>  
</div>  
</body>  
</html>

verhält sich bei mir wie vorgesehen. Das DIV wird nie breiter als 300px, bei entsprechend schmalem Viewport wird es aber schmaler und sieht dann so aus:
+----------+
|          |
| [] Test1 |
|   +-----+|
|   |     ||
|   +-----+|
| [] Test2 |
| [] Test3 |
| [] Test4 |
|          |
+----------+

viele Grüße

Axel

Beitrag melden
+1
Informationen zu den Bewertungsregeln