✔ Maximale Breite einer "Zelle"

Status
Nicht offen für weitere Antworten.
G

Geflügel

Erfahrenes Mitglied
Ich habe mal eine Skizze von meinem Problem gemacht.
Die mit "X" gekennzeichneten DIVs haben alle eine feste Größe, bzw. das Attribut display: inline;.
Die mit ---maximal--- gekennzeichnete DIV, soll wie der Name schon sagt maximal in der Breite sein, sodass die letzte mit "X" gekennzeichnete DIV absolut nach Rechts rückt.

Wie stelle ich das an?
Danke
 

Anhänge

  • prob.png
    prob.png
    433 Bytes · Aufrufe: 16
Hier mein Lösungsvorschlag:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper {
border: 1px solid #dfdfdf;
margin: 0;
padding: 0;
}

div.fixLeft {
float: left;
width: 25px;
line-height: 30px;
border: 1px solid #dfdfdf;
margin: 2px;
text-align: center;
}

* html div.fixLeft { /* Für IE */
margin: 3px 2px 1px 2px;
}

div.fixRight {
float: right;
width: 25px;
line-height: 30px;
border: 1px solid #dfdfdf;
margin: 2px;
text-align: center;
}

* html div.fixRight { /* Für IE */
margin: 3px 2px 1px 2px;
}

div.maximal {
line-height: 30px;
border: 1px solid #dfdfdf;
margin: 2px 32px 2px 126px;
text-align: center;
}

* html div.maximal { /* Für IE */
margin: 3px 35px 1px 128px;
}

div.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div class="wrapper">

     <div class="fixLeft">X</div>
     <div class="fixLeft">X</div>
     <div class="fixLeft">X</div>
     <div class="fixLeft">X</div>

     <div class="fixRight">X</div>

     <div class="maximal">maximal</div>

     <div class="clear">&nbsp;</div>

</div>

</body>
</html>
 
Es handelt sich hierbei um den Star-HTML-Hack, der als CSS-Browserweiche für den IE dient und so Fehlerkorrekturen, wie z.B. die falsche Interpretation der margin-Angaben bei floatenden Elementen, ermöglicht.

Dieser Selektor wird nur vom IE ausgeführt und schliesst alle nicht-IE-Browser aus.
 
Code: 
margin: 2px 32px 2px 126px; /* Außenabstand oben - rechts - unten - links */

Diese Angaben dienen zur Definiton des Außenabstandes für das DIV.maximal und erzeugen die flexible Element-Breite.
 
Ja das ist mir schon klar.
Nur so so setzt dein Code ja vorraus, das man genau wissen muss, wie breit die linken und rechten Zellen sind... Geht das auch flexibel?
 
Ohne feste Breitenangabe für die äußeren DIVs lässt sich das 'mittlere' DIV nicht mit einer flexiblen Breite ausstatten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück