Wie bekomme ich ein 3. div gefloatet nach rechts? @ tutorials.de: Tutorials, Forum & Hilfe

HoneyKiSs · 10.03.10 12:16

Hallo zusammen,
also ich sitze hier schon ne Weile dran und weiß nicht wsa ich falsch mache. Ich möchte 3 divs nebeneinander machen. In der Mitte steht der Inhalt u rechts u links kommen 2 Grafiken hin.

Im Moment sieht das ganze so aus

http://img697.imageshack.us/img697/9121/divfloat.jpg

das hab ich so gemacht jetzt wie im css code

Code :

#maininhalt {
width:645px;
border:#CCFF00 solid 1px;
}
 
#balkenlinks {
width:70px;
height:150px;
float:left;
background-color:#33CCFF;
border:#CCFF00 solid 1px;
}
 
#inhalt {
width:560px;
height:150px;
background-color:#3399FF;
border:#CCFF00 solid 1px;
}
 
#balkenrechts {
width:70px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
}

ich möchte aber das der gelbe untere Kasten auch nach rechts wandert. Wie bekomme ich das denn bloß hin. Ich weiß nicht wie ich das machen muss. Der macht immer nur meinen Inhaltdid nach rechts.

Wäre für Hilfe echt dankbar. Ich verzweifel noch.

Hier noch der HTML Code

HTML-Code:

<div id="maininhalt">
<div id="balkenlinks">LINKER BALKEN</div>
<div id="inhalt">INHALT BOX</div>
<div id="balkenrechts">RECHTER BALKEN</div>
</div>

</div>

</body>

danke schon mal

Maik · 10.03.10 12:21

Hi,

deinem Markup zufolge erhält #inhalt eine float:left-Regel und #balkenrechts float:right zugewiesen.

In meiner Signatur findest du zwei Tutorials, die eine andere Methode nutzen.

Deine Breitenangaben für die drei Spaltenblöcke mußt du rechnerisch nochmal überprüfen, da sie in der Summe mehr ergeben, als die Breite von #maininhalt . Und berücksichtige hierbei, dass gemäß dem Box-Modell die border-Eigenschaft zur width-Eigenschaft hinzugerechnet wird.

mfg Maik

Marschal · 10.03.10 12:25

hi,

versuche mal folgendes:

Code :

#maininhalt {
width:645px;
border:#CCFF00 solid 1px;
float: right;
}
 
#balkenlinks {
width:70px;
height:150px;
display: block;
background-color:#33CCFF;
border:#CCFF00 solid 1px;
}
 
#inhalt {
width:560px;
height:150px;
background-color:#3399FF;
border:#CCFF00 solid 1px;
display: block;
}
 
#balkenrechts {
width:70px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
display: block;
}

so müssten theoretisch alle elemente im Inhaltbox-Div immer rechts angeordnet werden.

Maik · 10.03.10 12:31

Zitat von Marschal

hi,

versuche mal folgendes:

Code :

#maininhalt {
width:645px;
border:#CCFF00 solid 1px;
float: right;
}
 
#balkenlinks {
width:70px;
height:150px;
display: block;
background-color:#33CCFF;
border:#CCFF00 solid 1px;
}
 
#inhalt {
width:560px;
height:150px;
background-color:#3399FF;
border:#CCFF00 solid 1px;
display: block;
}
 
#balkenrechts {
width:70px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
display: block;
}

so müssten theoretisch alle elemente im Inhaltbox-Div immer rechts angeordnet werden.

*hüstelräusper*

Falls es dir entgangen sein sollte: die drei Blöcke sollen nebeneinander erscheinen, und der rechte wird derzeit nach unten umgebrochen.

Ist auf dem Schnappschuß aber deutlich zu erkennen, wenn du den Beitrag nicht vollständig gelesen, oder etwas falsch verstanden hast.

HTML-Code:

<!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-03-10" />

<title>tutorials.de</title>

<style type="text/css">
#maininhalt {
width:645px;
border:#CCFF00 solid 1px;
}

#balkenlinks {
width:68px;
height:150px;
float:left;
background-color:#33CCFF;
border:#CCFF00 solid 1px;
}

#inhalt {
width:503px;
height:150px;
background-color:#3399FF;
border:#CCFF00 solid 1px;
float:left;
}

#balkenrechts {
width:68px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
float:right;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>

</head>
<body>

<div id="maininhalt" class="clearfix">
    <div id="balkenlinks">LINKER BALKEN</div>
    <div id="inhalt">INHALT BOX</div>
    <div id="balkenrechts">RECHTER BALKEN</div>
</div>

</body>
</html>

mfg Maik

HoneyKiSs · 10.03.10 12:45

also ich hab jetzt die codes von maik übernommen. jetzt ist es rechts, allerdings so komisch unten siehe bild.

http://img291.imageshack.us/img291/7167/divfloat2.jpg

p.s. ich hab die breiten noch nicht ausgerechnet. hab das bloß erstmal grob hingemacht die breite

Maik · 10.03.10 12:49

Bei mir bricht der rechte Block mit meinem vorgestellten Code nicht um.

Wie bekomme ich ein 3. div gefloatet nach rechts?-demo.jpg

mfg Maik

Marschal · 10.03.10 12:52

Nun gut

Habs jetzt getestet und es läuft alles Prächtig.

CSS:

Code css:

@charset "utf-8";
/* CSS Document */
 
.blank {
clear:both;
font-size:0;
line-height:0;
}
 
#maininhalt {
width:706px;
border:#CCFF00 solid 1px;
}
 
#balkenlinks {
width:70px;
height:150px;
display: block;
background-color:#33CCFF;
border:#CCFF00 solid 1px;
float: left;
}
 
#inhalt {
width:560px;
height:150px;
background-color:#3399FF;
border:#CCFF00 solid 1px;
display: block;
float: left;
}
 
#balkenrechts {
width:70px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
display: block;
float: right;
}

HTML:

HTML-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" title="standart"/>
</head>

<body>

<div id="maininhalt">
<div id="balkenlinks">LINKER BALKEN</div>
<div id="inhalt">INHALT BOX</div>
<div id="balkenrechts">RECHTER BALKEN</div>
<br class="blank" />
</div>

</body>
</html>

screenshot:

Wie bekomme ich ein 3. div gefloatet nach rechts?-unbenannt-1.jpg

EDIT: die Breite muss 706px sein

Maik · 10.03.10 12:55

Zitat von HoneyKiSs

also ich hab jetzt die codes von maik übernommen. jetzt ist es rechts, allerdings so komisch unten siehe bild.

http://img291.imageshack.us/img291/7167/divfloat2.jpg

p.s. ich hab die breiten noch nicht ausgerechnet. hab das bloß erstmal grob hingemacht die breite

Der Schnappschuß stammt wohl aus dem IE6, der mit seinem 3px-Gap-Bug glänzt.

Lösung:

Code css:

#balkenrechts {
width:68px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
float:right;
margin-left:0 !important;
margin-left:-3px;
}

mfg Maik

Maik · 10.03.10 12:58

Zitat von Marschal

EDIT: die Breite muss 706px sein

Wieso muß?

Wenn du dir die beiden Screenshots und die enthaltenden Hintergründe in dem Seitenlayout mal genauer anschaust, ist eigentlich davon auszugehen, dass die Ausgangsbreite von #maininalt das Maß aller Dinge ist (siehe meinen Lösungsvorschlag).

mfg Maik

HoneyKiSs · 10.03.10 12:59

ACH

es hat doch geklappt

in der Vorschau vom Dreamweaver hat der das falsch angezeigt, aber in der Browservorschau ist es richtig so

aber wieso zeigt er das im Dreamweaver falsch an.

Maik · 10.03.10 13:02

Vermutlich nutzt Dreamweaver den IE6 als Browser-Engine.

Zitat von Maik

Der Schnappschuß stammt wohl aus dem IE6, der mit seinem 3px-Gap-Bug glänzt.

Lösung:

Code css:

#balkenrechts {
width:68px;
height:150px;
background-color:#FFCC00;
border:#CCFF00 solid 1px;
float:right;
margin-left:0 !important;
margin-left:-3px;
}

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Scrollbalken nach rechts

Bekomme div nicht nach rechts ausgerichtet

scrollbalken nach rechts

wie beweg ich ein image nach rechts und nach oben********?

msg box nach rechts rücken

Stichworte

E-Mail:

Abonnieren Abbestellen