✔ DIV Layout - Linke Spaltenbreite fixiert

[karabey81]

Hallo,

Bin Anfänger mit CSS und habe mal einiges seit einigen Tagen gebastelt. Nur ich bekomme ein bestimmtes Befehle nicht hin..

Die Linke Spalte soll eine Fixe Größe haben und auch zur jeden Brower sowie Auflösung anpassen.

Wie bekomme ich das hin?

Hier ist der Design von mir

http://www.simunlock.eu/design/index2.html

http://www.simunlock.eu/design/style.css

Danke für die Hilfe

 

[Maik]

Hi,

wenn ein Element eine fixe (absolute) Größe besitzen soll, kann es sich nicht der Browserfenstergröße bzw. Bildschirmauflösung anpassen.

 

[karabey81]

Kann ich dann die Linke Spalte z.b. auf 25% setzen die Bilder innerhalb dieser Spalte fixieren damit bei Browsergrößen auch die Bilder in der Spalte bleiben?

 

[Maik]

Das Problem hierbei wird sein, dass die absolute Grafikbreite ab einem gewissen Punkt der Fensterverkleinerung die relative Spaltenbreite "überschreiten" wird, und dann je nach Browser, entweder die Spalte verbreitert wird, oder die Grafik die Spalte "überlappt".

 

[karabey81]

Verstehe.. Was wäre als Lösung zu empfehlen?

Wichtig ist mir hier das die Linke Spalte eine fixe breite hat damit es bei jeder Browsergröße gleich ist und auch die Bilder innerhalb dieser Spalte bleibt.

Die Rechte Spalte kann je nach Größe sich varieren.. Auf beiden Spalten sind mir die BG Bilder wichtig...

 

[Maik]

Denkbar wäre dieses Modell:

#leftCol {
width:200px;
float:left;
}

#rightCol {
margin-left:200px;
}

Die linke Spalte besitzt eine feste Breite von 200px und wird von der rechten Spalte umflossen, die eine variable Breite besitzt.

 

[karabey81]

Danke.. Nur wenn man jetzt den Browser bewegt als verkleinert verschwindet die Linke Spalte.

Das bei Firefox und IE6

Gut habs geklärt...

hier die breite der rechten spalte entfernen

 

[Maik]

Notier im HTML-Code die DIVs #col1 und #col2 in der umgekehrten Reihenfolge - also:

<div id="col2">...</div>
<div id="col1">...</div>

denn Elemente mit der float-Deklaration werden immer zuerst genannt, und wende diese Regel auf das DIV #col1 an:

#col1{
 height: 100%;
 margin: 0;
 margin-left: 200px;
 background-color: transparent;
 color: #333333;
 padding: 0;
 }