css Ausrichtung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute code
auto
blocken
boxen
code
display
element
erstellen
http
layout
mitte
not
position
prinzipiell zwei
problem
rechte box
test
text
url
verschieben
-
Hey Leute,
ich hoffe ihr könnt mir bei folgendem Problem weiterhefen:
Ich habe zwei div's, die ich gerne nebeneinander einbinden will.
Im Endeffekt soll es so aussehen:
|----div1--div2|
Es soll also das erste div zentriert im Browser angezeigt werden und das zweite div rechts am Rand des Browsers!
Hab in css schon mit floats und margin rumgespielt, bin aber leider zu keinem guten Ergebnis gekommen. Margin und padding hat irgendwie gar keine Auswirkung, wenn ich mit float arbeite rutscht div2 oft in eine neue Zeile...
Hoffe ihr könnt mir helfen!
Thx,
munich -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Lösung:
a) HTML
<div id="box1"> <div id="box2"></div> </div>
b) CSS
#box1 {height: 400px; width: 600px; background: #ccc; margin: 10px auto; position: relative;} #box2 {height: 200px; width: 120px; background: #999; top: 0px; left: 600px; position: absolute;}
Es funktioniert indem man die eine Box relativ positioniert und die innere dann absolute. Somit kann man die innere anhand der darüberliegenden "verschieben" mit left und top.
Gruß -
Lösung:
#box1 {height: 400px; width: 600px; background: #ccc; margin: 10px auto; position: relative;} #box2 {height: 200px; width: 120px; background: #999; top: 0px; left: 600px; position: absolute;}
Es funktioniert indem man die eine Box relativ positioniert und die innere dann absolute. Somit kann man die innere anhand der darüberliegenden "verschieben" mit left und top.
Gruß
einfacher und flexibler wäre es das so zu machen: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig
Nur statt float:left eben float:right.
Gruß, Prog -
thewitcher schrieb:
Ich hätte jetzt display:inline für beide divs gesagt und sie dann mit width, padding und margin entsprechend skaliert. Zur Not noch ein übergeordnetes Element erstellen, dem man dann mit text-align sagt, wohin die beiden inneren divs flutschen sollen.
Dadurch hätte man ja keine Boxen mehr und das löst auch nicht das Problem!
prog schrieb:
Lösung:
#box1 {height: 400px; width: 600px; background: #ccc; margin: 10px auto; position: relative;} #box2 {height: 200px; width: 120px; background: #999; top: 0px; left: 600px; position: absolute;}
Es funktioniert indem man die eine Box relativ positioniert und die innere dann absolute. Somit kann man die innere anhand der darüberliegenden "verschieben" mit left und top.
Gruß
einfacher und flexibler wäre es das so zu machen: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig
Nur statt float:left eben float:right.
Gruß, Prog
Das löst nicht das Problem. Es soll prinzipiell zwei Boxen geben, wobei eine in der Mitte ist und die andere neben dieser aber nicht in der Mitte, mir fällt spontan nicht ein wie man das geschickt mit float lösen kann, dass nur eine in der Mitte ist! -
werktags schrieb:Dadurch hätte man ja keine Boxen mehr
Stimmt, dann halt inline-block oder vielleicht tabel-cell.
[Das löst nicht das Problem. Es soll prinzipiell zwei Boxen geben, wobei eine in der Mitte ist und die andere neben dieser aber nicht in der Mitte, mir fällt spontan nicht ein wie man das geschickt mit float lösen kann, dass nur eine in der Mitte ist!
Übergeordnetes Element hat text-align:center und die rechte Box wird gefloatet? Wie wär's damit? -
thewitcher schrieb:
werktags schrieb:Dadurch hätte man ja keine Boxen mehr
Stimmt, dann halt inline-block oder vielleicht tabel-cell.
[Das löst nicht das Problem. Es soll prinzipiell zwei Boxen geben, wobei eine in der Mitte ist und die andere neben dieser aber nicht in der Mitte, mir fällt spontan nicht ein wie man das geschickt mit float lösen kann, dass nur eine in der Mitte ist!
Übergeordnetes Element hat text-align:center und die rechte Box wird gefloatet? Wie wär's damit?
Ehrlich gesagt, weiß ich nicht genau was du meinst. Kannst es aber gerne mal schnell machen und hochladen, vielleicht ist das ja ne schönere Variante! Nur wenn man floatet wird die Box ja ganz rechts angezeigt und man möchte ja sie direkt neben die andere haben.
Meine Variante: http://werktags.lima-city.de/test/test.html
Gruß -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
