Hilfe bei div Positionierung

F

flandersX

Mitglied
Ich versuche nun seit einigen Stunden meine div container so anzuordnen wie in auf diesem Bild !

Probleme macht mir immer Container2.
Ich bekomme ihn immer nur auf selbe Höhe wie container 1.

hat jemand ein beispiel für mich ?
 

Anhänge

  • bsp.gif
    bsp.gif
    10,7 KB · Aufrufe: 15
Hi,

du richtest dir zwei Hauptspaltenblöcke mittels float:left und float:right ein, von denen dann der rechte die drei Container 2 - 4 umschliesst.

mfg Maik
 
Danke für die Antwort,

ist es auch möglich das innerhalb nur eines Conatiners umzusetzen ?
Da ich mir noch nicht über breite und Position der Gesamten Seite einig bin.

Und 2 Hauptcontainer bekomme ich irgendwie nicht auf eine Gesamtgröße von 1000px !


ich glaube ich brauche ein code beispiel .......
 
... et voilà:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-07-10" />
<title>tutorials.de | Hilfe bei div Positionierung</title>
<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
#wrapper {
width:750px;
margin:auto;
}
#leftCol {
width:250px;
float:left;
background:#747E83;
}
#rightCol {
width:500px;
float:right;
}
#div_2 {
background:#A9910C;
}
#div_3 {
width:250px;
float:left;
background:#29E8BD;
}
#div_4 {
width:250px;
float:right;
background:#21A8F4;
}
/* ]]> */
</style>
</head>
<body>

<div id="wrapper">
    <div id="leftCol">Container 1</div>
    <div id="rightCol">
        <div id="div_2">Container 2</div>
        <div id="div_3">Container 3</div>
        <div id="div_4">Container 4</div>
    </div>
</div>

</body>
</html>


mfg Maik
 
Und weil du dir noch nicht im Klaren über die Breitenverhältnisse bist, hier eine Variante mit relativen Maßen für die Spalten:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-07-10" />
<title>tutorials.de | Hilfe bei div Positionierung</title>
<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
#wrapper {
width:1000px;
margin:auto;
}
#leftCol {
width:33%;
float:left;
background:#747E83;
}
#rightCol {
width:67%;
float:right;
}
#div_2 {
background:#A9910C;
}
#div_3 {
width:50%;
float:left;
background:#29E8BD;
}
#div_4 {
width:50%;
float:right;
background:#21A8F4;
}
/* ]]> */
</style>
</head>
<body>

<div id="wrapper">
    <div id="leftCol">Container 1</div>
    <div id="rightCol">
        <div id="div_2">Container 2</div>
        <div id="div_3">Container 3</div>
        <div id="div_4">Container 4</div>
    </div>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück