✔ Wieder mal CSS-Design Problem

[SuReBuRn]

Geht um das: ...
Wie bekomm ich #content (der rot-gestrichelte Kasten) so hin, dass er genau links und rechts abschliesst (oder mit ein paar Pixel Abstand) und sich mit der Auflösung mit bewegt?

Danke schon mal für die Mühe

 

[muhkuh]

Na, kommt drauf an, wie du das Layout aufgebaut hast.

#header {
    width: 100%;
    height: 140px;
}
#menu_left {
    width: 10%;
}
#content {
    width: 80%;
    float: left;
}
#menu_right {
    width:10%;
    float: left;
}

<div id="header">HEADER</div>
<div id="menu_left">MENU LEFT</div>
<div id="content">CONTENT</div>
<div id="menu_right">MENU RIGHT<div>

Musst hier also komplett mit Prozent-Angaben arbeiten, weil du ja ein floating-Layout haben möchtest. Feste Breiten mit Pixeln werden also schwierig.

 

[versuch13]

Hier hast du ein Beispiel:

http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm

 

[Maik]

Hi!

Musst hier also komplett mit Prozent-Angaben arbeiten, weil du ja ein floating-Layout haben möchtest. Feste Breiten mit Pixeln werden also schwierig.

Ein floatendes Layout lässt sich auch mit Pixelangaben umsetzen:

div#left {
width:110px;
float:left;
}

div#right {
width:110px;
float:right;
}

div#content {
margin:0 115px; /* besitzt zu den äußeren Spalten einen Abstand von 5px */
}

Im Markup wird dann lediglich die Reihenfolge der DIVs "umgestellt":

<div id="left">...</div>
<div id="right">...</div>
<div id="content">...</div>

Siehe auch http://www.yaml.de/artikel/xhtml/div_reihenfolge.html

 

[SuReBuRn]

Vielen Dank, bin schon ein Stück weiter. Leider geht es nur im Firefox noch nicht Weiss vielleicht noch jemand Rat?

 

[Maik]

Hi,

ich kann da derzeit keinen Darstellungsfehler im Firefox entdecken.

Was funktioniert denn bei dir nicht wie gewünscht?