3 Boxen nebeneinander 2 Statisch - 1 Variabel @ tutorials.de: Tutorials, Forum & Hilfe

Webgau · 23.08.11 16:42

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-Code:

<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

spicelab · 23.08.11 17:58

Wandel die Reihenfolge der drei inneren DIV-Blöcke so um:

Code xhtml:

<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:

Code css:

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

[edit]
Eben übersehen: Zusätzlich erhält #right anstelle von float:left die Anweisung float:right.
[/edit]

Webgau · 23.08.11 19:46

Supi, habe es jetzt so gelöst:

Code :

1
2
3

#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******!

spicelab · 23.08.11 19:50

Zitat von Webgau

habe es jetzt so gelöst:

Code :

1	#center { margin:0 425px 0 200px; position: absolute; min-width: 420px; }

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

Man(n)/Frau wird sehen

Zitat von Webgau

Vielen Dank******!

6 Ausrufezeichen weniger hätten selbiges gleichbedeutend zum Ausdruck gebracht, dafür aber ansehnlicher wie dieses "Gestümmel"

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

2 Boxen Nebeneinander und darunter wieder 2 Boxen

Simples Layout - 2 Div Boxen nebeneinander

2 Boxen, 1 fest, die andere Variabel

Div-Boxen nebeneinander

Div boxen nebeneinander

E-Mail:

Abonnieren Abbestellen