CSS Box will nicht klappen?

peterpa

Hallo,

ich habe aktuell ein CSS Problem bei dem ich alleine auch nach vielen Anläufen einfach nicht weiterkomme.

Ich will auf meinem Wordpress Blog zwei Boxen nebeneinander platzieren. Das klappt einwandfrei. Nun gibt es rechts und links eine Box. In beide Boxen packe ich einen längeren Text (Artikelbeschreibung). Nun kommt das Problem.

Über beide Boxen will ich jeweils noch eine Box machen, wo der Titel der Artikelbeschreibung hineinkommen soll.

Das ist mein CSS Code:

Code

#Powder {
     
        width: 310px;
        height: 50px;
    background-color: #c1a55e;
        border: 2px solid #000000;
        
        


}




#Andere {
     
        width: 310px;
        height: 50px;
    background-color: #ffffff;
        border: 2px solid #000000;
        
       float: right;


}






#Verkauf {
      float: left;
        width: 310px;
    background-color: #ffffff;
        border: 2px solid #000000;
        margin-bottom: 18px;
        










  padding-top:3px;
  padding-left:3px;
  padding-right:3px;
  padding-bottom:3px






}






#Verkauf2 {
      float: right;
        width: 310px;
    background-color: #ffffff;
        border: 2px solid #000000;
        margin-bottom: 18px;
            




  padding-top:3px;
  padding-left:3px;
  padding-right:3px;
  padding-bottom:3px






}

Alles anzeigen

Das hier ist der HTML Code:

Code

<div id="Powder">


Titel 1
</div>
















<div id="Verkauf">


Artikelbeschreibung 1


</div>


<div id="Andere">


Titel 2


</div>


<div id="Verkauf2">


Artikelbeschreibung 2
</div>

Alles anzeigen

Leider verschiebt sich alles komisch seit ich die zwei Titel Boxen hinzugefügt habe.

Sieht vielleicht jemand das Problem?

Beste Grüße!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

ptra

HTML

<html>
<head>
    <style>*{
    margin: 0;
    padding: 0;
}


#wrapper {
    width: 900px;
    height: 700px;
    margin: 20px auto;
}
/*HEADER*/
#header{
    width: 900px;
    height: 150px;
    background-color: #999;
}
#eins {
    margin-top: 10px;
    float: left;
    width: 300px;
    height: 100px;
    background-color: blue;
}
#zwei {
    margin-top: 10px;
    float: left;
    width: 300px;
    height: 100px;
    background-color: red;
}
#drei {
    margin-top: 10px;
    float: left;
    width: 300px;
    height: 100px;
    background-color: black;
}
/*CONTENT*/
#content {
    width: 900px;
    height: 500px;
    background-color: #707070;
}
#content_links{
    float: left;
    width: 400px;
    height: 450px;
    background-color: #fff;
    border: 1px solid black;
}
#content_rechts{
    float: right;
    width: 400px;
    height: 450px;
    background-color: #fff;
    border: 1px solid black;
}
#footer {
    width: 900px;
    height: 100px;
    background-color: gray;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <div id="eins"></div>
            <div id="zwei"></div>
            <div id="drei"></div>
        </div>
        <div id="content">
            <div id="content_links"></div>
            <div id="content_rechts"></div>            
        </div>
            
        <div id="footer"></div>
    </div> 
</body>
</html>

Alles anzeigen

So ungefähr könnte das aussehen, was du bezweckst. Block-Elemente legen sich grundsätzlich untereinander und durch floaten kann man dem entgegenwirken. Inline-Elemente stehen immer nebeneinander.

Aber deinem Code-Gewusel entnehme ich, dass es dir ein wenig an den Grundlagen fehlt. Ich hoffe, ich konnte dir helfen.
Gruß. Petra ;-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS Box will nicht klappen?

Jetzt mitmachen!