2 Boxen in einer

Paddy123 · #1 (**permalink**) 21.02.2006, 15:58

Hi!

Ich werde gerade verrückt.

Ich habe eine Hauptbox, in dieser sich zwei weitere Boxen befinden die sich übereinander anordnen. Jetzt möchte ich nochmal zwei einfügen, die unter den oberen aber neben einander angeordnet sind. Allerdings lassen diese beiden Boxen sich nicht "haargenau" neben einander anordnen und ich weiß nach etlichem probieren und studieren nicht weiter, deshalb hoffe ich mal, dass mir hier jemand helfen kann.

Code:

<!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" xml:lang="de" lang="de">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="basic_style.css" media="screen" />
</head>
<body>

      <div id="main">
           <div id="top">
           </div>
           <div id="banner">
           </div>
                <div id="menu">
                </div>
                <div id="content">
                </div>
           </div>

</body>
</html>

Die css-Datei:

Code:

/* Body Styles */

body {margin: 0; background: #ffffff}
a {color: steelblue}
a:hover {color: #255B86}

/* boxen eigenschaften */

#main {
        background: #ffffff;/*#6699CC #CCFF33 #F3F3F3 #CCFF33*/;
        margin-left: -399px;
        position: absolute;
        top: 0px;
        left: 50%;
        width: 798px;
        border-left: 1px solid steelblue;
        border-right: 1px solid steelblue;
}
#top {
        background: #CCFF33;/* #CCFF33 #F3F3F3 #CCFF33*/;
        width: 798px;
        height: 35px;
}
#banner {
        background: #ffffff;/* #CCFF33 #F3F3F3 #CCFF33*/;
        width: 798px;
        height: 120px;
        border-top: 1px solid steelblue;
        border-bottom: 1px solid steelblue;
}
#menu {
        background: #ADCEEF;/* #EBEBEB;#CCFF33 #F3F3F3 #CCFF33*/;
        float: left;
        width: 225px;
        height: 35px;
}
#content {
        background: #EBEBEB;/* #EBEBEB;#CCFF33 #F3F3F3 #CCFF33*/;
        float: right;
        width: 570px;
        height: 39px;

}

Any Ideas?

Wäre euch echt sehr dankbar!

Grüße
Paddy

Ps.: Die Threads hier haben mich nicht wirklich weiter gebracht.

mazzo · #2 (**permalink**) 21.02.2006, 16:21

Du hast eine Hauptbox (#main), in der sind zwei einzelne Boxen (#oben und #unten) untereineander.
soweit so einfach:

Code:

<div id="main">
<div id="oben"></div>
<div id="unten"></div>
</div>

Breiten festlegen, ggfs. Hintergrundbilder und -Farben. Fertig. Du brauchst weder float noch absolute Positionierung.

Jetzt willst Du noch dazu zwei Boxen in #main reintun, die unter #unten stehen, und zwar nebeneinander. Ab jetzt brauchst Du float.

Code:

<div id="main">
<div id="oben"></div>
<div id="unten"></div>
<div id="linksunten"></div>
<div id="rechtsunten"></div>
</div>

#linksunten muss links floaten. #main braucht ein clear (so wie im link in meiner Sig beschrieben).

#linksunten und #rechtsunten brauchen Breiten, damit sie nebeneinander passen.

Wenn #linksunten und #rechtsunten immer gleich hoch sein sollen und Du dies nicht fix festlegen möchtest sondern Abhängig vom Inhalt, brauchst Du den "faux columns" Trick. Siehe u.a. auch im XHTMLwiki (oben verlinkt) unter den FAQs. Oder auch ca. 5000 Treffer in der Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Drei Boxen mit gleicher Höhe in allen Browsern	felicesinger	CSS	22	09.04.2016 04:35
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite!	Web4Live	CSS	2	13.07.2011 16:01
Mitwachsende Container: 4 Boxen	Cu Chullain	CSS	1	08.09.2010 18:57
Boxen beim Seitenladen zuklappen (ohne "Flackern")	Plasm	Javascript & Ajax	5	08.01.2010 16:42
Gleiche Abstände zwischen Boxen?	Shepstar	CSS	5	29.07.2006 03:37