Problem mit width:auto

Status
Nicht offen für weitere Antworten.

sasfed

Mitglied
Hallo,

folgendes Problem:

ich möchte eine Box erstellen die 3-dimensional erscheinen soll. Ich könnte jetzt in PSP eine Box erstellen und dann die in der <div>-Box die width/heigt fix einstellen. Will ich aber nicht. Jetzt habe ich die Grafik in 3 Teile und die <div>-Box in 3 <div>-Boxen zerschnitten.

Der linke und rechte Rand ist fix und die mittlere Box soll variable sein. Das ganze funktioniert aber nicht. Und ich weiß nicht warum. Hier mal der Code.

Code:
#forwardbox {
               position:relative;
               left:5%;
	       width:60%;
	       height:250px;
	       top:10%;
	       float:left;
	    }
	    
#forbox_left,#forbox_middle,#forbox_right{
              float:left;
              position:relative;
              height:100%;
}
	    
#forbox_left{
	      width:67px;
	      background-image:url("images/forbox_left.jpg");
}
#forbox_middle{
	      width:auto;
	      background-image:url("images/forbox_middle.jpg");
}
#forbox_right{
	      width:63px;
	      background-image:url("images/forbox_right.jpg");
}

Erläuterung: Die forwardbox ist quasi die Mutter aller Boxen ;-)

gruß
sasfed
 
Mein Lösungsvorschlag für eine dynamische Breite des mittleren DIVs:

CSS-Code (edit @ 10:08 h):
Code:
#forwardbox {
               position:relative;
               left:5%;
               width:60%;
               height:250px;
               top:10%;
               float:left;
            }

#forbox_left, #forbox_right, #forbox_middle {
              height: 100%;
}

#forbox_left{
              width:67px;
              float:left;
              background:url("images/forbox_left.jpg");
              margin-right: 0 !important; margin-right: -3px;
}

#forbox_middle{
              background:url("images/forbox_middle.jpg");
}

#forbox_right{
              width:63px;
              float:right;
              background:url("images/forbox_right.jpg");
              margin-left: 0 !important; margin-left: -3px;
}

div.clear {
          clear: both;
          height: 0;
          margin: 0;
          padding: 0;
          font-size: 0;
}
HTML:
<div id="forwardbox">
 <div id="forbox_left">left</div>

 <div id="forbox_right">right</div>

 <div id="forbox_middle">middle</div>

 <div class="clear">&nbsp;</div>
</div>
 
Status
Nicht offen für weitere Antworten.
Zurück