CSS-Problem mit vervollständigen

[Jens]

Hi,

auch ich hab css-Probleme:

siehe: http://kosak-racing.de/neu/kosak.html

hier möchte ich das die linke Spalte immer bin zum Ende der Hauptbox geht.

hier mal die CSS-Datei:

Code: Alles auswählen

html, body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
width:780px;
text-align:left;
min-width: 500px;margin-left:auto;
margin-right:auto;
 
}

#header{
height:144px;
width:100%;
background-color:#FFFFFF;
}

#leftcol{
border:solid white 0px;
width:170px;
float:left;
position:relative;
margin-left:-170px;
margin-right:1px;
background-color:#C6C6C6;
}

#outer{
border:solid white 0px;
  /*/*/ border-left-width: 170px ;  /* left column width. NN4 hack to hide borders */
border-left-color: #FFFFFF;   /* left column colour */
border-left-style: solid;
background-color: #FFFFFF; /* center column colour */
width: auto;
}

#footer{
height:20px;
width:100%;
background-color:#FFFFFF;
text-align:center;
color: #cccccc;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.unten:link, a.unten:visited  { color: #cccccc; text-decoration: underline }
a.unten:hover, a.unten:active  { color: #000000; text-decoration: underline }

#inner{margin:0; width:100%;}

#maincol   { background-color: #c6c6c6; margin: 0 -8px 0 3px; position: relative; width: 100%; max-height: 100%; float: left }

#outer>#inner { border-bottom: 0px solid #FFFFFF;  }

.clr{clear:both;}

.content{padding:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   font-weight: bold;
} /*padding for content */

#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#outer{border-left:0;}
}


Kann mir da jemand helfen?

[ram-online]

hi,
ich habe das so gelöst, das die beiden immer eine mindesthöhe von 350px haben (kann man natürlich noch verändern) und eine max-höhe von 100%.
nicht wundern, ich habe maincol unter leftcol geschoben wegen der übersichtlichkeit. ich hab die stellen kommentiert:

Code: Alles auswählen


/**** LINK-tag style sheet kosak.css ****/

html, body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
width:780px;
text-align:left;
min-width: 500px;margin-left:auto;
margin-right:auto;
 
}

#header{
height:144px;
width:100%;
background-color:#FFFFFF;
}

#leftcol{
border:solid white 0px;
width:170px;
float:left;
position:relative;
margin-left:-170px;
margin-right:1px;
background-color:#C6C6C6;
}

#maincol {
background-color: #c6c6c6;
margin: 0 -8px 0 3px;
position: relative;
width: 100%;
height:auto;
float: left } /* Höhenangabe gelöscht */

#maincol,#leftcol{      /* #maincol und #leftcol zusammengefasst damit sie genau die gleichen eigenschaften haben*/
max-height:100%;   /* maximale höhe 100% */
min-height:350px;  /* minimale höhe für beide sind 350px darüber hinaus müssten sie parallel grösser werden */
}

#outer{
border:solid white 0px;
  /*/*/ border-left-width: 170px ;
/* left column width. NN4 hack to hide borders */
border-left-color: #FFFFFF;   /* left column colour */
border-left-style: solid;
background-color: #FFFFFF; /* center column colour */
width: auto;
}

#footer{
height:20px;
width:100%;
background-color:#FFFFFF;
text-align:center;
color: #cccccc;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.unten:link, a.unten:visited  { color: #cccccc; text-decoration: underline }
a.unten:hover, a.unten:active  { color: #000000; text-decoration: underline }

#inner{margin:0; width:100%;}

#outer>#inner { border-bottom: 0px solid #FFFFFF;  }

.clr{clear:both;}

.content{padding:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   font-weight: bold;
} /*padding for content */

#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#outer{border-left:0;}
}

hoffe so funktioniert es. der code ist valide.

gruss ram-online

[Jens]

Danke,

im Firefox passt es, aber leider unterstützt IE den Befehl nicht richtig

Wann kommt Internet Explorer 7 raus?

[Shadowfax]

Meiner Meinung nach interpretiert der IE min und max-height nicht richtig. Jedenfalls noch nicht.
Hatte nämlich auch schon häufiger das Problem.

Wenn ich jetzt Zeit hätte und nicht für´s Abi lernen müsste, würde ich es mal probieren, wie es anders geht. Hab ich aber nicht

Deswegen mein Tipp: Es müsste gehen, wenn man den linken und den mittleren DIV-Container in einen Container mit Eigenschaft

Code: Alles auswählen

position: relative;


packt. Genau weiß ich es jetzt grad nicht, dass es bei beiden Browsern funktioniert, aber mit dem Ansatz hab ich es meiner Meinung nach schonmal hinbekommen.

[jtugurman]

jedesamal wenn ich vom source dedicadet server ein server starte laggt das extrem.Woran kann es liegen? Davor hatte ich nicht dieses problem und wieso jetzt? wie kann ich dieses problem den lösen? danke.

[Jens]

[Gamer]

Danke,

im Firefox passt es, aber leider unterstützt IE den Befehl nicht richtig

Ja das stimmt, der ie unterstützt min-height überhaupt nicht