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

3 DIV positionieren (zwei untereinander, eins mit rowspan 2 rechts)

H

harakiri81

Neues Mitglied
Hallo,

ich bin in css leider nicht besonders fit, muss nun aber ein kleines grundlayout machen. es sollen 3 divs positioniert werden:

DIV1 |DIV3
DIV2 |DIV3

hier mein versuch:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Untitled Page</title>
   <style type="text/css">
      div#linksoben {
         background-color: Yellow;
         float:left;
         width:500px;
      }
      div#rechts {
         background-color: Blue;
         height:500px;
      }
      div#content {
         background-color: Green;
      }
   </style>
</head>
<body>
   <div id="linksoben">
      linksoben</div>
   <div id="rechts">
      rechts</div>
   <div id="content">
      content</div>
</body>
</html>
das div "content" steht nun aber leider unter den divs linksoben und rechts.
wie erreiche ich, dass div content direkt unter div linksoben sitzt?
anbei noch ein screenshot.
 

Anhänge

  • Unbenannt.png
    Unbenannt.png
    7,8 KB · Aufrufe: 4
Zuletzt bearbeitet:
ERsteinmal solltest du dir angewöhnen, die klassen und id's sinnvoll zu bezeichnen. Was ist wenn aus dem "right" plötzlich eine Spalte wird die zentriert oder link ist? dann musst du immer in den code eingreifen...

zu deinem "Problem"....überlege ersteinmal wofür die du HTML-Elemente benötigst. Wenn du einen Footer hast, dann kann auch ein <p> ausreichen, oder ein <ul>. Wenn du einen Header hast, reicht manchmal auch schon nur ein <h1> und es wird garkein <div> benötigt. Ein <div> gruppiert nur mehrere Elemente.

Desweiteren fehlt bei dir ein <!Doctype>. auch ist es klug einen "komplett"-Reset zu machen indem du mit hilfe von:

Code: 
* { padding:0; margin:0; }

Eine ausführliche reset.css kann man später verwenden, wenn man "Ahnung" hat. Ebenfalls sind angaben in "px" nicht empfehlenswert. Verwende % oder em.

zu deiner Sache, eigentlich sollte ein einfaches float:left; das ganze machen. Du hast eine Sidebar in der Inhalt1 und Inhalt2 ist und einen Maincontent in dem Inhalt3 ist.

Code: 
div#sidebar, div#main { float:left; width:40%; height:20em; }

div#sidebar { background:#ccc; }
div#main { background:#666; }

und..nicht das clearen am Ende vergessen.


Gruß
Loon3y
 
hallo Loon3y,

danke für die schnelle antwort. hätte wohl die erste zeile des codes doch mit reinkopieren sollen (doctype).
zur verwendung der divs: es soll oben ein banner sein und drunter der content. rechts soll ein skyscraper banner liegen, in tabellenform würde man sagen mit rowspan=2.
dein codebeispiel versteh ich nicht ganz, warum nur noch zwei divs?
 
so hab jetzt glaub ich meine lösung, durch die vorherige hilfe:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Untitled Page</title>
   <style type="text/css">
      div#sidebar, div#main {
         float: left;
         width: 40%;
         height: 20em;
      }
      div#sidebar {
         background: #ccc;
      }
      div#main {
         background: #666;
      }
      div#bannerObenDiv {
         background: orange;
      }
      div#contentDiv {
         background: green;
      }
   </style>
</head>
<body>
   <div id="main">
      <div id="bannerObenDiv">
         hier der obere banner</div>
      <div id="contentDiv">
         ab hier normaler content</div>
   </div>
   <div id="sidebar">
      hier der skyscraper banner</div>
</body>
</html>

ps: was meinst du mit clearen am ende?
danke nochmal.
 
das war noch der screenshot, von der lösung aus post 4.
was ich noch wissen wollte, was meinst du mit "nicht das clearen am Ende vergessen"?
danke.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben