Box lässt sich nicht anpassen

[Guron]

Guten Tag,
ich habe ein kleines HTML und CSS Problem wobei ich Hilfe brauche. Ich habe eine mainbox. Die erste Mainbox ist Links gesetzt. Nun möchte ich eine Mainbox Rechts anbringen, allerdings klappt das nicht so ganz. Wenn ich eine neue Mainbox hinzufüge befindet sich diese unter der ersten Mainbox. Das ist ja schön und gut. Allerdings lässt sich mit float:left; oder float:right; die Box sich nicht auf die andere Seite auf der gleichen Höhe der Box bewegen, sondern bewegt sich nur in die Richtung. Ich habe dann versucht mit margin-top und margin:0 auto; versucht die Box nach oben anzubringen. Hat geklappt, allerdings ist die Box dann nicht mehr länger für jeden Bildschirm angepasst. Gibt es da eine Lösung? Code vom Index:



Code von der Mainboxen in der Index:


css von der mainbox:


Screen:

Die Box ist in der ersten Box drinne. Die Box lässt sich nicht verschieben, nach Recht oder nach links nicht ansonsten ist die Box nicht für jeden Bildschirm angepasst. Bitte um Hilfe!

[Warnuk3r]

Hab jetzt grade keine Lust deinen Code zu durchforsten, sieht recht unordentlich aus.

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
       
<body>

	<div class="mainbox">Erste Box</div>
	<div class="mainbox">Zweite Box</div>
   
</body>
</html>

CSS

body {
	background-color: BurlyWood;
}
.mainbox {
        background:#fff;
        border:1px solid #ccc;
        width: 300px;
        height:100px;
	float: left;
}

Ergebnis


Wenn dir das nicht hilft kann ich später mal deinen Code nochmal Ordnen und das Problem direkt bei dir beheben, jetzt im Moment aber echt kein Bock da reinzuschauen.

[Guron]

Ich bin jetzt schon mal so weit, dass die Newsboxen sich jetzt nicht mehr wirklich verrutschen. Allerdings, wenn ich rauszoome verkleinert sich unten das Bild so um 1-2 Pixel. Warum ist das so und wie kann ich das lösen? Ebenso wenn ich einen Border von 1px hinzufüge rutscht die Rechte box nach unten.



Code:


CSS:

[Warnuk3r]

<div class="articleimg" style="position:relative;">
     <div style="position:absolute; bottom:100px; right:160px;"><h2><a href="#">Artikel lesen...</a></h2></div>
          </div>
               <div class="shortarticle">
                    <div style="padding:5px">
                         <h2>World of Warcraft - neues Addon haut rein und macht Spaß!</h2>
                         <p><i>Vor kurzem wure das neue Addon, Warlords of Dreanor, von World of Warcraft veröffentlicht. Das Resultat ist eindeutig... Die Spieler lieben es! Schon
                                        vor dem Patch wurden die 10 Millionen Abonnenten geknackt, dass konnte nur gut werden! Wie genau kommt Dreanor aber an? Wir berichten...</i></p>
                      </div>
              </div>

Du hattest das Bild als Hintergrundbild für den Text "Artikel lesen..." und die Kurzfassung des Artikels, daher haben diese beide um den Platz konkurriert. In meinem korrigierten Code liegt die Kurzfassung des Artikel vertikal neben dem Hintergrundbild, da dieses ja Platz reserviert.

Damit diese horizontal nebeneinander liegen, kannst du dir meinen ersten Post hier nochmal anschauen.