Zwei Divs nebeneinander packen in css

**Moe777** · 21.02.2009 12:09

Hi, ich hab (wie ihr euch anhand der frage vl. denken könnt) nicht allzuviel ahnung von css. Ich bin gerade dabei zum "trainieren" ein layout zu coden und häng gerade an einem eigentlich einfachen teil fest. Ich will einen container neben einen anderen packen, leider stapeln die sich immer untereinander an. Wie bekomm ich das Problem gelöst, so das es in allen Browsern richtig angezeigt wird?

#navigation{
margin-top:78px;
color:#040b1f;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
float:right;
text-align:left;
padding-left:10px;
background-color:#086916;
height: 100%;
width:114px;

#text{
background-color:#020612;
color:#086916;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-left:43px;
margin-right:23px;
padding-left:57px;
padding-right:66px;
padding-top:132px;
margin-top:82px;
width:640px;
height:100%;

}

**TruckerB** · 21.02.2009 12:17

Ich bin leider nicht so in CSS bewandert. Benutze lieber Tabellen^^
Aber soweit ich weis macht ein div-Tag automatisch einen Zeilenumbruch. Versuch es mal mit einem span-Tag

**Vertaler** · 21.02.2009 12:39

Da du absolute Größen angibst, hast du vermutlich schon im Sinn, wo genau die Sachen stehen sollen. In dem Fall ist es am einfachsten, du gibst den Containern absolute Positionen auf der Seite. (Dann mußt du auch nicht mit so „krummen“ margin-Werten arbeiten.)
Am besten, du liest dir das SelfHTML-Kapitel zur Positionierung durch, da erfährst du alles, was du benötigst.

**Moe777** · 21.02.2009 12:46

bekomm ich da keine Probleme mit dem IE?
War das letzte mal nämlich irgendwie so

**Moe777** · 21.02.2009 13:12

Ok, ich bin jetzt soweit, dass die zwei container nebeneinander sind. Allerdings ist der eine komplett rechts ausgerichtet. Ich könnte diesen zwar mit absoluten werten nach links verschieben, allerdings waäre das ja dann nur für eine bestimmte auflösung der richtige wert...

html-datei:

Code:

<?xml version="1.0" ?>
<!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>Random Page</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
    <img src="header.jpg">
    <div id="text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
        <br>
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
        <br>
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
        <br>
        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
    </div>
</div>
<div id="navigation">
    <img src="navioben.jpg"><br>
    <img src="news.jpg"><br>
    <img src="gallery.jpg"><br>
    <img src="links.jpg"><br>
    <img src="impressum.jpg"><br>
</div>
</body>
</html>

css-datei

Code:

body{
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-color:#040b1f;
} 
#navigation{
margin-top:132px;
margin-right:100px;
color:#040b1f;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:left;
padding-left:10px;
background-color:#086916;
height: 100%; 
width:114px;
float:right;
}
#main{
background-color:#020612;
color:#086916;
margin-left:49px;
margin-right:23px;
margin-top:123px;
width:640px;
height:100%;
float:left;
}
#text{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-left:57px;
padding-right:66px;
padding-top:33px;
}

wies aussieht:
[Bild: ist.PNG]

soll:
[Bild: soll.jpg]

**Chris** · 21.02.2009 14:22

Es gibt Codetags, die zerstören einem auch nicht den Quelltext durch Smileys.

[edit] Linksausgerichtet floaten lassen dann gehts.

**Moe777** · 21.02.2009 14:46

O.o
Ich war mir 100% sicher ich hätte das schon probiert... naja, jetzt klappts auf alle Fälle, danke

Kp, warum ich quotes benutzt hab

**Moe777** · 21.02.2009 17:53

Ok, nächstes Problem

Wie ihr oben sehen könnt, reichen leider die boxen nicht bis ganz unten. Ich habs mit height:100% probiert, aber das klappt nicht. Irgendwelche Tips?

**Vertaler** · 21.02.2009 18:08

Wenn du dem body- und am besten auch noch dem html-Tag auch die Höhe 100% zuweist, müßte es eigentlich funktionieren.

Zwei Divs nebeneinander packen in css

Themen-Optionen

Zwei Divs nebeneinander packen in css

Berechtigungen