• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

DIVs nebeneinander positionieren

Junkee[]

Junkee[]

Lounge-Member
Ich bekomms einfach nicht hin.
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #n1 {
        display: inline-block;
        border: 2px solid #ff00ff;
      }
      #n2 {
        width: 200px;
        float: right;
        border: 2px solid #00ff00;
      }
    </style>
  </head>
  <body>
    <div id="n1">
      ------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ----------------
    </div>
    <div id="n2">
      ------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------
    </div>
  </body>
</html>
n1 soll sich links befinden, n2 rechts. n2 soll eine feste Breite haben, n1 soll den restlichen Platz ausfüllen. Ich hatte es hin bekommen, aber da hatte ich n2 im HTML vor n1 gesetzt, was ich aber auch nicht will. Wäre nett, wenn sich das jemand angucken könnte...
 
Soweit ich das weiß geht das nicht, da man für float immer width braucht...hab ich zumindest immer so gemacht.

EDIT: oder du arbeitest mit Prozentangaben.
 
Zuletzt bearbeitet:
Ohne Breitenangabe nimmt sich dein div #n1 den Platz den es bekommen kann. Ist max-width eine Möglichkeit ?
 
Ist nicht wirklich schön - funktioniert aber:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    .wrapper {
    		position: relative;
    }
      #n1 {
        display: inline-block;
        border: 2px solid #ff00ff;
        margin-right: 210px;
      }
      #n2 {
        width: 200px;
        position: absolute;
	top: 0;
	right: 0;
        border: 2px solid #00ff00;
      }
    </style>
  </head>
  <body>
	<div class="wrapper">
    <div id="n1">
      ------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ----------------
    </div>
    <div id="n2">
      ------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------
    </div>
    </div>
  </body>
</html>
 
Junkee[] schrieb:
Wie meinst du das mit max-width?
Zum Vergrößern anklicken....
Na einfach max-width: 600px; z.B. für #n1, oder eben eine feste Breite.
Wenn du 2 Container brauchst, die optisch nebeneinander sind, rechts mit fester Breite und links der Rest,
dann mußt du die divs anders schachteln:
Code: 
    <div id="n1">
       <div id="n2">
      ------------------------------- 
      </div>
  ------------------- -------------------- ----------------
   </div>

Aber das war ja nicht gefragt.
 
Zuletzt bearbeitet:
kkapsner schrieb:
Ist nicht wirklich schön - funktioniert aber:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    .wrapper {
    		position: relative;
    }
      #n1 {
        display: inline-block;
        border: 2px solid #ff00ff;
        margin-right: 210px;
      }
      #n2 {
        width: 200px;
        position: absolute;
	top: 0;
	right: 0;
        border: 2px solid #00ff00;
      }
    </style>
  </head>
  <body>
	<div class="wrapper">
    <div id="n1">
      ------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ----------------
    </div>
    <div id="n2">
      ------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------
    </div>
    </div>
  </body>
</html>
Zum Vergrößern anklicken....
Danke ;)
Mit CSS habe ich leider immer wieder Schwierigkeiten...
 
So, jetzt zerhauts mit mein Design, weil .wrapper nicht die Höhe des größeren Elements, sondern nur von n1 annimmt.
 
dkdenz schrieb:
Und hört mal alle bitte mit dem HTML5-Doctype auf.
Das ist noch (lange) kein Standard.
Einige Browser liefern damit ein absolut falsches Layout ab.
Zum Vergrößern anklicken....

Ähhh... Nein, denn JEDER Browser wird dadurch in den Standard-Mode gesetzt, deswegen KÖNNEN gar keine Fehlerauftreten.

Zitat John Resig:
John Resig; schrieb:
This DOCTYPE is able to push Firefox, Safari, Opera, IE6, IE7, and IE8 into standards mode and allow us to (as best as we can) develop web applications in a standards-based way (CSS, HTML, JavaScript, DOM).
Zum Vergrößern anklicken....


Wensinteressiert, Fun Facts zum Doctype (von Peter Kröner)


EDIT: Das ist aber auch logisch, dass der Browser dann in den Standard-Mode gesetzt wird, denn das einzigste, was den Browser vom Doctype interessiert ist, alles, außer die Links :D, denn kein Browser lädt die (x)html version bei jedem Web-Aufruf aus dem iNet, wäre ja auch schon blöd wenn, sondern er hat sie lokal auf dem Rechner gespeichert. Und beim Doctype von HTML5 (<!DOCTYPE html>) wird nichts anderes definiert als Standart-HTML, und Standart-HTML ist bei jedem Browser HTML5 (außer bei den Browsern, die nicht mehr aktualisiert werden (sprich IE5, den (hoffentlich;)) sowieso kein Mensch mehr benutzt, weil in Kürze ja auch schon der IE9 rauskommt)
 
Zuletzt bearbeitet:
So funktioniert's wenigstens im FF:
Code: 
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.wrapper {
				border: 2px solid black;
			}
			#n1 {
				border: 2px solid #ff00ff;
				margin-right: 210px;
				float: left;
			}
			#n2 {
				width: 200px;
				border: 2px solid #00ff00;
				margin-left: -210px;
				float: right
			}
			.clear {
				clear: both;
				height: 0px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div id="n1">
			------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------------------------------------- ------------------- -------------------- ----------------
			</div>
			<div id="n2">
			------------------------------- ------------------- -------------------- ------------------ --------------------- ---------------------------- ------- ----- ----------------
			</div>
			<div class="clear"></div>
		</div>
	</body>
</html>

EDIT: im IE8/7 auch... puh
 
Zuletzt bearbeitet:
... da steht aber nichts vom Kompatibiltätsmodus - alle IEs ab einschließlich 6 werden in diesen gesetzt.
In welchem Browser hast du da denn schon einmal ein falsches Layout gesehen, dass bei HTML 4.01 dadrin richtig war?
 
Habe mich wohl falsch ausgedrückt.
Im Wesentlichen meinte ich eigentlich nur, nicht jetzt schon auf HTML5 zu setzen, da es als Standard noch weit entfernt ist.
 
Auf den HTML5 Standard würde ich auch noch nicht setzten. Ich verwende nur die DocType, da sie einfach zu merken ist, alle relevatnen Browser in den Standardmodus setzt (IE5 zählt nicht und sonst habe ich noch keine gesehen, der das nicht tut) und man ja damit auch ein Statement für HTML5 setzt (einige Neuerungen wären wirklich gut - z.B. canvas für alle Browser!)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben