zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Bereiche nach rechts floaten, zusammen 100%

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.05.2009, 10:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 97
pixel24 befindet sich auf einem aufstrebenden Ast
Standard 3 Bereiche nach rechts floaten, zusammen 100%

Hallo zusammen,

ich würde gerne ein elastisches Layout (glaube das heist so) erstellen. Es sollen drei Bereiche nebeneinander nach rechts floaten. Im linken (header1) und im rechten (header3) sitzt jeweils eine Grafik, somit ist die Breite dieser beiden Container vorgegeben. Der mittlere Bereich (header3) soll immer den gesamten verfügbaren Platz zwischen header1 und header3 ausfüllen. Wie kann ich sowas realisieren?
Ich möchte, wenn es irgendwie möglich ist keinen Zusatzkontainer (Wrapper) umd die Bereiche legen.

Bisher sieht es so aus:
HTML-Code:
    <body>
        <div id="header1">
            Header1
        </div>
   		<div id="header2">
            Header2
        </div>
		<div id="header3">
            Header3
        </div>
   
        <div id="headnav1">
            <ul>
[...]
HTML-Code:
#header1 {
	width: 400px;
	background-color: orange;
	float: left;
	padding-left: 20px;
}
#header2 {
	background-color: yellow;
	float: left;
}
#header3 {
	width: 200px;
	background-color: green;
	float: right;
}
Das Ergebnis sieht so:



aus. Header zwei ist nur so groß wie sein Inhalt.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.05.2009, 11:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
Es sollen drei Bereiche nebeneinander nach rechts floaten
Ich weiß zwar nicht, was du genau damit meinst, aber du floatest deine bereiche nach links, wenn man deinem CSS-Code Glauben schenken darf

Ansonsten kannst du 3 Bereiche nebeneinander legen, indem du den linken Bereich nach links, den rechten Bereich nach rechts floatest und den mittleren Bereich kein float und keine Breite gibst. Im Markup muss dann zuerst das linke, dann das rechte und dann erst das mittlere Element stehen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.05.2009, 15:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2007
Beiträge: 97
pixel24 befindet sich auf einem aufstrebenden Ast
Standard

ja das mit dem "nach rechts floaten" war wohl eine kleine verwirrung Es sollte links heisen. Klappt wunderbar. Vielen Dank!
Mit Zitat antworten
  #4 (permalink)  
Alt 14.05.2009, 15:52
Benutzer
neuer user
 
Registriert seit: 15.07.2007
Beiträge: 38
Weksel befindet sich auf einem aufstrebenden Ast
Standard

Hi ihr beiden,

vielleicht spukt es ja nur in meinem Kopf aber ... wenn ich mir grade vorstelle, dass in der mittleren Division ein Element mit fester Breite (z.B. ein Bild) liegt, und ich das Browserfenster in der Breite verkleinere, dann müsste sich doch das Layout zerschießen, sobald der verbleibende Bereich in der Mitte kleiner ist als das Bild? Nicht weiter tragisch, wenn nur kleine Grafiken eingesetzt werden, kommt jedoch eine breite vor, wäre dieser Fall schnell gegeben.

Grüße,
w3ksel
__________________
Webdesign/-Entwicklung bei der Hamburger Werbeagentur G8media.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.05.2009, 15:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
Zitat von Weksel Beitrag anzeigen
Hi ihr beiden,

vielleicht spukt es ja nur in meinem Kopf aber ... wenn ich mir grade vorstelle, dass in der mittleren Division ein Element mit fester Breite (z.B. ein Bild) liegt, und ich das Browserfenster in der Breite verkleinere, dann müsste sich doch das Layout zerschießen, sobald der verbleibende Bereich in der Mitte kleiner ist als das Bild? Nicht weiter tragisch, wenn nur kleine Grafiken eingesetzt werden, kommt jedoch eine breite vor, wäre dieser Fall schnell gegeben.

Grüße,
w3ksel
Du hast natürlich recht. Dafür gibt es die CSS-Eigenschaft "min-width". Die versteht leider der IE nicht, aber man kann sicher Komprisse finden.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
komische Verschiebung - wo liegt das Problem? Muckel (X)HTML 5 03.01.2009 18:26
Text links unten - Bild rechts floaten - geht nicht cross_site_script CSS 7 11.06.2007 17:14
2 bilder floaten rechts + links rotsch CSS 9 02.11.2004 21:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:08 Uhr.