3 Boxen nebeneinander 2 Statisch - 1 Variabel

W

Webgau

Mitglied
Servus,

ich möchte in meinem Template 3 Boxen neben einander ausrichten, quasi #left - #content - #right

#left soll eine feste breite haben (in px)
#content soll variabel bleiben (in %)
#right soll eine feste breite haben (in px)

alle drei container zusammen sollen nicht breiter als 90% des Bildschirmrandes sein. Ich habe folgendes gemacht:

HTML: 
<body>
<div id="wrapper">
	<div id="header">HEADER</div>
    <div id="content">
    	<div id="left">Menü</div>
        <div id="center">Content</div>
        <div id="right">Menü</div>
    </div>
</div>
</body>

Code: 
/* Allgemein */
body { line-height: 1.6em; font-size: 0.85em; font-family: Arial,Helvetica,sans-serif; color: #333; text-align: center; }

/* Wrapper */
#wrapper { max-width: 90%; min-width: 960px; background-color: #000; margin: 0 auto; text-align: left; height: 800px; }

/* Header */
#header { width: 100%; }

/* Content */
#content { width: 100%; }

/* Content Boxen */
#left { float: left; width: 180px;  }
#center { float: left; width: 60%; }
#right { float: left; width: 330px; }

Ich habe das ganze mal auf das minimalste zurückgesetzt, mein problem ist, das die drei boxen bei zu kleiner darstellung verrutschen, also dir rechte box rutsch unter die andere.

Ich denke mal, das problem liegt daran das ich #left #center #right an #content ausrichten muss allerdings steh ich gerade auf dem schlauch, weil theoretisch richtet sich ja #center am bildschirmrand aus, oder?

Wäre über eure Hilfe Dankbar, grüße mirko
 
Wandel die Reihenfolge der drei inneren DIV-Blöcke so um:

HTML: 
<div id="content">
   <div id="left">Menü</div>
   <div id="right">Menü</div>
   <div id="center">Content</div>
</div>

und formatier #center wie folgt, damit sich dessen Breite bis zum Erreichen der deklarierten Mindestbreite variabel verhält, und die Blöcke von rechts beginnend nicht nach unten umbrechen:

CSS: 
#center { margin:0 330px 0 180px; }

[edit]
Eben übersehen: Zusätzlich erhält #right anstelle von float:left die Anweisung float:right.
[/edit]
 
Zuletzt bearbeitet:
Supi, habe es jetzt so gelöst:

Code: 
#left { width: 180px; float: left; background-color: #333; }
#center { margin:0 425px 0 200px; position: absolute; min-width: 420px; } 
#right { width: 330px; float: right; background-color: #999; }

hoffe das sich das jetzt mit den anderen containern verträgt...

Vielen Dank******!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück