• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV rechts von einem zentrierten Wrapper

QuadratImQuadrat

QuadratImQuadrat

Neues Mitglied
Ich habe ein div, welches als Wrapper dient und horizontal zentriert dargestellt werden soll.
Nun möchte ich jedoch rechts davon ein weiteres div anhängen. Die Zentrierung des Wrappers soll jedoch nicht verloren gehen.
Leider funktioniert das nicht.

Ich hätte es gerne so (das rote div zentriert, blaues div angehängt):
jguo-1u-fc49.png



Aktuell erzeugt mein Code folgendes:
jguo-1s-03af.jpg



Mein HTML-Code:
PHP: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
    
<style type="text/css">

.container {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background-color:red;
    float: left;
}

.balkon {
    width: 50px;
    height: 100px;
    background-color:blue;
    float: left;
}

</style>



<body>

    <div class="container">
        main
    </div>
    
    <div class="balkon">
        balkon
    </div>

</body>

</html>



Hat mir jemand einen Tipp?
 
Werbung:
Du solltest .balken nicht floaten sondern

a) im HTML-Code das Element mit der Klasse balken innerhalb von .container ablegen.
b) .balken dann absolut oder relativ innerhalb von .container positionieren, so dass es rechts rausragt
 
Ich würde nicht mit absoluter positionierung arbeiten. Das geht auch sicherer.

Du bleibst bei deinem bisherigen HTML Code, und legst um alles rum noch eine div, welche eine feste Breite und margin 0 auto hat. Die div muss natürlich so breit sein, wie der rote und der blaue Kasten zusammen.
Dann positionierst du .container und .balken wieder mit float.
In der Klasse container entfernst du dann natürlich margin: 0 auto.

So ist gewährleistet das alles zentriert ist, und gleichzeitig auch wie gewünscht floatet.
 
Werbung:
Dann wäre aber nicht .container mittig sondern .container und .balken in ihrer Gesamtheit. Das sähe imho anders aus als er es will.
 
So vielleicht?

Code: 
<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">

#container {
 width:550px;
 height:450px;
 margin:0 auto;
 color:#fff;
} 
#links {
 width:400px;
 background:#a33;
 min-height:400px;
 float:left;
}

#rechts {
 width:150px;
 float:right;
 height:150px;
 background:#448;
}
</style>
<title>test</title>
</head>
<body>
<div id="container">
<div id="links">Textbereich</div>
<div id="rechts">Werbung oder News</div>
</div>    
</body>
</html>
 
Werbung:
Hallo
danke für die vielen Antworten.


eistruhe schrieb:
Du bleibst bei deinem bisherigen HTML Code, und legst um alles rum noch eine div, welche eine feste Breite und margin 0 auto hat. Die div muss natürlich so breit sein, wie der rote und der blaue Kasten zusammen.
Zum Vergrößern anklicken....
Wie threadi schon erwähnte, führt dies leider nicht zu dem Ergebnis das ich mir wünsche.

threadi schrieb:
Du solltest .balken nicht floaten sondern
a) im HTML-Code das Element mit der Klasse balken innerhalb von .container ablegen.
b) .balken dann absolut oder relativ innerhalb von .container positionieren, so dass es rechts rausragt
Zum Vergrößern anklicken....
Ein guter Tipp.
Das geht sicher in die richtige Richtung. Leider bin ich dann doch gescheitert - wohl aus mangelhaften CSS-Kenntnissen.
Zwar konnte ich dank deines Tipps die beiden Divs wie gewünscht positionieren, doch verschob sich entweder der Text im roten Bereich, oder der blaue Bereich wurde nach unten verschoben:

jguo-1w-735b.jpg


jguo-1v-3295.jpg



prm schrieb:
Bannerleiste seitlich von zentrierter Seite anbringen
Zum Vergrößern anklicken....
Ahh... gut. Wie ich sehe bin ich nicht der erste mit dem Problem!
Das ist das was ich gesucht habe!


djheke schrieb:
Irendwie kann ich nichts Edieren. Der obere Code ist falsch.
DIV rechts von einem zentrierten Wrapper
DIV rechts von einem zentrierten Wrapper
Zum Vergrößern anklicken....
Und diese Lösung von djheke gefällt mir noch besser, da sie ohne absolute auskommt.
So werde ich es machen.

Vielen Dank für eure Hilfe.
 
Kann man deinen Versuch auch irgendwo online sehen? Das würde sicherlich hilfreicher sein bei der Beurteilung von Textverschiebungen, die bei dem was ich beschrieben hatte nicht vorkommen sollten. Aber wenn Du schon eine brauchbare Lösung hast ... ?
 
Werbung:
@threadi:

Bei folgendem Code wird der Text im roten Bereich nach rechts verschoben (um die Breite des blauen Div):

PHP: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
    
<style type="text/css">

.container {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background-color:red;
}

.balkon {
    width: 50px;
    height: 100px;
    background-color:blue;
    float: left;
    position:relative;
    left: 400px;    
}

</style>



<body>

    <div class="container">
            main

        
        <div class="balkon">
            balkon
        </div>
    </div>
    


</body>

</html>

Wobei ich nicht nachvollziehen kann warum das passiert.

Und wenn ich den Inhalt des roten Div in ein weiteres Div packe, also so:

<div>main</div>

dann rutscht das blaue Div runter.
 
Also, threadi's Vorschlag funktioniert auch wunderbar. Allerdings mit position:absolute: Da aber k e i n e Inhalte verloren gehen, kannst du diese Variante natürlich auch nehmen. So ersparst du dir ein Div(Hat ja keiner was zu verschenken;-))
Code: 
<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">


#container {
 width:400px;
 min-height:400px;
 margin:0 auto;
 color:#fff;
 background:#a33;
 position:relative;
} 

#rechts {
 position:absolute;
 top:0;left:400px;
 width:60px;
 height:150px;
 background:#448;
 word-wrap:break-word;
}
</style>
<title>DIV rechts von einem zentrierten Wrapper</title>
</head>
<body>
<div id="container">
<h2>Hallo User.</h2>
<p>Irgendein Text.</p>
<div id="rechts">Balken</div>
</div>    
</body>
</html>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben