kostenloser Webspace werbefrei: lima-city


css Ausrichtung

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    munich

    munich hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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ß
  4. 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.

  5. 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
  6. 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!
  7. 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?
  8. 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ß
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!