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

divs sind nicht nebeneinander

Status
Für weitere Antworten geschlossen.
R

RedDrag

Guest
Hi,

Ich will auf meiner Seite(noch offline) zwei divs innerhalb eines divs nebeneinander haben. Im IE klappt das auch wunderbar nur der FF
zeigt das ziemlich komisch an.
Wenn ich bei der id div2-2 allerdings float:right; dazuschreibe dann sind die divs zwar nebeneinander nur dann funktioniert die Marginangabe bei beiden nicht mehr.
HTML- Code:
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>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="conten-style-type" content="text/css"/>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly" />

    <link href="style.css" type="text/css" rel="stylesheet" />


</head>

<body>
<img style="margin:1px 19em 0px 19em" src="blabla.jpg" alt="ahdaldjalj" border="0"/>
<div id="div1">
<p><a href="index.htm">Home</a></p>
<p><a href="Member.htm">Member</a></p>
<p><a href="Clanwars.htm">Clanwars</a></p>
<p><a href="Downloads.htm">Downloads</a></p>
<p><a href="Contact.htm">Contact</a></p>
</div>
<div id="div2">

[B][COLOR=Blue]<div id="div2-1">[/COLOR][/B]
<img class="Blade1" src="Blade1.jpg" border="0" alt="" />
<hr style="color:#009000"/>
<span class="Schrift1"><b>abcde</b></span>
<hr style="color:#009000"/>
<span class="Schrift1">Clanleader</span>
[B][COLOR=Blue]</div>[/COLOR][/B]
[B][COLOR=Blue]<div id="div2-2">[/COLOR][/B]
<img class="Blade1" src="Blade1.jpg" border="0" alt="" />
<hr style="color:#009000"/>
<span class="Schrift1"><b>abcde</b></span>
<hr style="color:#009000"/>
<span class="Schrift1">Co- Clanleader</span>
[B][COLOR=Blue]</div>[/COLOR][/B]

</div>


</body>

</html>
CSS- Code:
Code: 
/* Allgemeine Deklarationen */
body {background-image:url(hpHintergrund3.jpg);}
a:link {font-family:Helvetica; font-style:normal; text-decoration:none; color:#ff0000; background-color:#626262; display: block; line-height: 1.4em;}
a:visited {font-style:normal; text-decoration:none; color:#ff0000; background-color:#626262; display: block; line-height: 1.4em;}
a:focus {font-style:normal; text-decoration:none; color:#000000; background-color:#ff0000; display:block;}
a:hover {font-style:normal; text-decoration:none; color:#000000; background-color:#ff0000; display:block;}
a:active {font-style:normal; text-decoration:none; color:#000000; background-color:#ff0000; display:block;}
#div1 {float:left; width:10em; height:22em; margin:3em 0em 0em 4em; font-family: Helvetica; text-align:center; background-color:#000000; padding-top:1em; border: .2em solid #ADADAD;}
#div2 {width:27em; height:35em; margin:3em 0em 0em 17em; background-color:#000000; border:.3em solid #000000;}

/* Tabledeklarationen */
#borderdiv1 {padding:2em .9em 2em .9em; border:.1em solid; margin:2em 2em 0em 2em;}
table {margin:.8em 0em 0em 1.5em; background-color:#000000; border-color:#ffffff;font-family: Time New Roman; color:#ff0000;}
th, td {border-color:#ffffff;}
.th {background-color:#626262;}

/* Contactdeklarationen */
#contact {margin-top:3em; margin-left:1.3em;}
#Email {text-align:center;}

/* Memberdeklarationen */
#div2-1 {float:left; text-align:center; color:#009000; width:6em; height:10.6em; margin:2em .1em 2em 2em; border:.1em solid #009000;}
#div2-2 { text-align:center; color:#009000; width:6em; height:10.6em; margin:2em 2em 2em .3em; border:.1em solid #009000;}
.Blade1 {margin:.5em .5em 0em .5em; border:.1em solid #009000;}
.Schrift1 {font-size:.8em;}
Ich hoffe ihr könnt mir helfen.

liebe grüße RD
 
Zuletzt bearbeitet von einem Moderator:
Ohne jetzt Deinen Code anzusehen vermute ich, dass Du nicht weißt, dass sich Block-Elemente beim floaten "untereinander" schieben, d.h. das nicht gefloatete Element hat trotzdem die Breite von 100%, der margin muss mindestens so groß sein, wie das gefloatete Element breit ist, damit Du was siehst.

Färbe Dir Deine Elemente mal ein oder besorg Dir Firebug, das Plugin für Firefox. Damit siehst Du schön, wie das funktioniert.

Gruß,
-Efchen
 
Also ich hab versucht deine Erklärung zu verstehen, aber irgendwie hats nicht geklappt:?
 
Ich versuchs mal dir zu erklären:


Du hast zwei Bereiche nebeneinander, die du floaten willst, also nebeneinander bringen willst:

Bereich 1 | Bereich 2

Damit der zweite jetzt genau neben dem ersten Bereich steht muss der Abstand des zweiten Bereiches zum linken Rand mindestens so groß sein, wie der linke Bereich breit ist.
Umgekehrt gilt das gleiche, dass der rechte Abstand des linken Bereiches auch mindestens so breit sein muss, wie der rechte Bereich breit ist.

Wenn du das so einhältst siehst du die beiden Bereiche nebeneinander, also gefloated.


Jetzt verstanden?
 
mom ich probier es mal

okey ich hab es probiert (wenn ich es richtig verstanden habe) und es hat nicht geklappt.
 
Zuletzt bearbeitet von einem Moderator:
Der Code ist der gleiche wie oben nur, dass ich bei dem
div2-2 das margin für links auf 6em gesetzt habe.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben