✔ Wie bekomme ich ein 3. div gefloatet nach rechts?

HoneyKiSs

HoneyKiSs

Mitglied
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

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: 
<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 :)
 
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
 
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.
 
Marschal hat gesagt.:
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.
Zum Vergrößern anklicken....

*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: 
<!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
 
also ich hab jetzt die codes von maik übernommen. jetzt ist es rechts, allerdings so komisch unten siehe bild.

divfloat2.jpg


p.s. ich hab die breiten noch nicht ausgerechnet. hab das bloß erstmal grob hingemacht die breite :)
 
Bei mir bricht der rechte Block mit meinem vorgestellten Code nicht um.

demo.JPG

mfg Maik
 
Nun gut:) Habs jetzt getestet und es läuft alles Prächtig.

CSS:
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: 
<!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:
Unbenannt-1.jpg

EDIT: die Breite muss 706px sein;)
 
HoneyKiSs hat gesagt.:
also ich hab jetzt die codes von maik übernommen. jetzt ist es rechts, allerdings so komisch unten siehe bild.

divfloat2.jpg


p.s. ich hab die breiten noch nicht ausgerechnet. hab das bloß erstmal grob hingemacht die breite :)
Zum Vergrößern anklicken....
Der Schnappschuß stammt wohl aus dem IE6, der mit seinem 3px-Gap-Bug glänzt.

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

mfg Maik
 
Marschal hat gesagt.:
EDIT: die Breite muss 706px sein;)
Zum Vergrößern anklicken....
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
 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück