Hallo,

der Titel ist sicher nixsagend... deswegen erläuter ich euch mal eben mein Problem... also:

ich haben ein 3spaltiges Design, Links das Menü mit einer festen breite von 200pixeln und in der Mitte der Inhalt und rechts sone art banner...

Ich würde gerne ein Design über die komplette seite machen... nur wenn ich den ersten Div mit 200Pixel-Breite definiere... und die anderen beiden zusammen auf 100% setze (also mitte 80% und der rechte 20%) dann kann man genau noch 200pixel zu rechten seite scrollen... versteht ihr?

also gibt es einen befehl, mit dem ich den "rest" definieren kann? also Div1 = 200Pixel, und Div2 u. Div3 = Rest der Seite (je nach auflösung unterschiedlich).


Mit Tabellen würde das gehen... aber hab mir vorgenommen gar keine zu benutzen... wisst ihr wie man das machen könnte?

Vielen Dank schonmal für eure Hilfe!!

100% (Breite) beziehen sich auf das Elternelement (sofern dort eine Breite definiert ist, sonst das Eltern-Elternelement usw.). Wenn Du einem DIV eine fixe Breite gibst und ein anderes den Rest ausfüllen soll passiert das eigentlich automatisch, da die DIVs immer den verfügbaren Platz einnehmen.

Wenn Du aber neben einer fixen Breite noch eine 100%-Breite angibst sind das ja über 100% und somit passt das nicht mehr in ein Fenster.

__________________
Wer floatet muss auch clearen!, Menu-Listen, 3-Spalten-Layout, CSS-FAQs

schon mit margin-left:200px versucht?

Kannst auch mal den Quellcode anzeigen?

LG
~Ö~

http://www.xhtmlforum.de/viewtopic.php?p=40534#40534

__________________
</ulle>

http://www.xhtmlforum.de/viewtopic.php?p=40534#40534

__________________
</ulle>

hm? aber dann kann ich den margin-teil doch nicht nutzen... außerdem wird magin doch auf ie und netscape etc. anders gerechnet oder?

und zur ersten antwort: naja, kann sein das das so funktioniert... aber ich will ja das der mittlere div größer wird als der rechte... also irgend eine größe muss ich dem geben... egal ob in % oder in px

aber danke für eure antworten... weiß jemand was ich nun machen könnte?

warum? Da es automatisch den verfügbaren Platz einnimmt ist doch alles paletti. Wenn das mittlere DIV unabhängig von der Fenstergröße immer breiter sein soll als der rechte bist Du eben wieder bei fixen Breiten für alle drei respektive relativen Breiten für alle drei. Ersteres führt bei kleinen Fenstern zum querscrollen, letzteres führt erst zum querscrollen wenn das betreffende DIV kleiner wird als der breiteste Inhalt (z.B. ein Bild).

__________________
Wer floatet muss auch clearen!, Menu-Listen, 3-Spalten-Layout, CSS-FAQs

ich machs nochmal an nem beispiel fest.... so hab ichs jetzt:

div links = 230px
div mitte = (nicht definiert bzw. auto)
div rechts= 200px

aber der mittlere div passt sich nicht an, sondern geht auf 100% und drängt den rechten div nach unten... hier als beispiel:

<style type="text/css">
html, body {height:100% width:100% background-color:ffffff}
<!--
body
{
margin:0;
padding:0;
font-family:Verdana;
font-size:10px;
color:#ffffff;
font-weight: bold;
font-size:14px;
text-decoration:none;

background-color:#ffffff;
text-align:center;
}
.haupttext {
font-family:Verdana;
font-size:12px;
color:#000000;
font-weight: normal;
}
.ueberschrift {
font-family:Verdana;
font-size:14px;
color:#336699;
font-weight: bold;
}
#oben {
background-color:ffffff;
float:left;
height:100px;
width:100%;
min-width:900px;
}
#indivoben {
float:left;
width:350px;
}
#indivoben1 {
float:left;
padding-top:15px;
height:100%;
width:500px;
}
#menue {
background-color:3366cc;
border:1px solid #ffffff;
float:left;
height:35px;
width:100%;
min-width:750px;
}
#indivmenue {
background-color:336699;
float:left;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
height:100%;
width:130px;
}
#indivmenue1 {
background-color:3366cc;
float:left;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
height:100%;
width:250px;
}
#inhalt {
padding-top:15px;
background-color:ffffff;
width:100%;
min-width:800px;
float:left;
}
#links {
background-color:ffffff;
width:230px;
min-width:200px;
float:left;
}
#indivlinks {
background-color:ff3300;
border:2px solid #336699;
width:180px;
float:left;
}
#indivlinks1 {
background-color:ffffff;
width:20px;
min-width:20px;
float:left;
}
#mitte {
background-color:ffffff;
float:left;
}
#indivmitte {
background-color:F0F0EB;
border:1px solid #C2C6BA;
height:350px;
float:left;
}
#rechts {
background-color:ffffff;
width:200px;
min-width:100px;
float:right;
}
</style>

es geht um die divs "links", 2mitte" und "rechts". versteht ihr das?

gruß andreas

Das div #mitte braucht kein float...
Wie sieht das HTML zu dem CSS aus?

Bitte benutze die Code-Funktion!

hallo, das float habe ich weg genommen! die width bei der mitte auch! hier der code vom html: