Nach Float und Clear verschiebt sich das ContentDIV

[bobomampf]

Hallo,
gerade mal noch ein kleines Problemchen.. Wahrscheinlich sitze ich einfach schon zu lange dran und seh den Wald vor lauter Bäumen nicht mehr

Habe 3 Div's. Einer davon umschließt zwei in denen Text ist und die nebeneinander sein sollen.

Es soll so sein wie unten im Bild, aber leider verschiebt sich das umschließende div jetzt an den linken Bildrand und ist nicht mehr zentriert.

Der Htmlcode für die drei Div's ist folgender:

<div id="Content">
    <div id="left">
    	...
    </div>
    <div id="right">
        ...
  	</div>
</div>
<div id="bottom">
...
</div>

Der CSS Code für die Div's sieht so aus.

#Content {
	width: 930px;
	height: 100%;
	background-color: #DDD;
	margin: 0px auto 0px auto;
	padding: 15px;
	float: left;
	text-align: left;
}
#left {
	width: 450px;
	height: auto;
	padding-right: 15px;
	float: left;
}
#right {
	width: 450px;
	height: auto;
	padding-left: 15px;
	float: right;
}
#bottom {
	width: 960px;
	height: 25px;
	margin: 10px auto 15px auto;
	padding-top: 4px;
	border-top: solid 2px #000;
	text-align: left;
	clear: both;
}

 

[Elroy]

Hallo.

Du hast dein umgebendes div nach links gefloatet.
Was erwartest du also das es tut?

Gruss
Elroy

 

[bobomampf]

Bin ich denn nun total bekloppt? Ich kriegs einfach net hin.. Wenn ich bei #Content float auf inherit, none oder ganz wegmache, dann ist es so, dass die Box, die eig. grau sein sollte nur ganz klein am oberen Rand ist aber eigentlich bis nach unten reichen sollte.. ? Was zur Hölle übersehe ich grade?

 

[momo95]

Hallo,

probiere es doch mal mit position: absolute;

__________________________________________________
Mein 100. Beitrag

 

[bobomampf]

Das geht soweit, allerdings verschiebt es mir dann die bottomleiste nach rechts oben??

#Content {
	width: 960px;
	height: auto;
	background-image: url(Bilder/content.jpg);
	background-repeat: repeat;
	margin: 0px auto 0px auto;
	position: absolute;
	text-align: left;
}
#left {
	width: 450px;
	height: auto;
	margin: 15px 0px 15px 15px;
	padding-right: 15px;
	float: left;
}
#right {
	width: 450px;
	height: auto;
	padding-left: 15px;
	margin: 15px 0px 15px 15px;
	float: right;
}

#bottom {
	width: 100%;
	height: 25px;
	margin: 0px auto 15px auto;
	padding-top: 4px;
	border-top: solid 2px #000;
	text-align: left;
	clear: both;
}

 

[Elroy]

Hallo.

Lass bloss das absolute positionieren weg. Das ist Unsinn.

Du übersiehst einfach das du deinen beiden Boxen left und right keine Hintergrundfarbe gegeben hast also wird die Standardfarbe des Browsers angezeigt.
Das ist in diesem Fall weiss.

Gib also deinen beiden Boxen dieselbe Hintergrundfarbe die du auch content gegeben hast.

Gruss
Elroy

 

[bobomampf]

Also wenn das der Fehler ist, dann muss ich mich fuer meine peinliche Frage entschuldigen.
Das probier ich gleich wenn ich daheim bin :-D

 

[bobomampf]

Das klappt so immer noch nicht.. Ich glaub ich mach es jetzt echt mit Tabellen ey Sowas hatte ich ja noch gar nie.. :/

 

[Elroy]

Hallo.

Zeig mal deinen aktuellen Code.

Ich hab das nämlich ausprobiert und es hat geklappt.

Gruss
Elroy

 

[bobomampf]

Ich hab den Code jetzt nicht mehr genau so, wie da als er net ging.. Ich habs jetzt notgedrungen mit Tabellen gemacht :/ So ist er jetzt gerade.. Aber es ging einfach nicht, wie ich es wollte..

#Content {
	width: 960px;
	height: auto;
	background-color: #DDD;
	margin: 0px auto 0px auto;
	text-align: left;
}
#left {
	width: 450;
	height: 100%;
	padding: 15px;
	background-color: #DDD;
	vertical-align: top;
}
#right {
	width: 450px;
	height: 100%;
	padding: 15px;
	background-color: #DDD;
	vertical-align: top;
}
#bottom {
	width: 100%;
	height: 25px;
	margin: 0px auto 15px auto;
	padding-top: 4px;
	border-top: solid 2px #000;
	text-align: left;
	clear: both;
}

 

[Elroy]

Hallo.

Mit Tabellen kann ich dir natürlich nicht helfen. Schade.

Gruss
Elroy

 

[bobomampf]

Na hilf mir doch bitte Die Tabellen sind nur ne Notlösung, falls ichs nicht auf die Reihe krieg

 

[Elroy]

Na hilf mir doch bitte Die Tabellen sind nur ne Notlösung, falls ichs nicht auf die Reihe krieg

Um dir helfen zu können müsste ich deinen HTML und CSS Code sehen damit ich weiss was du falsch gemacht hast.
Wenn du da aber Tabellen drin hast bringt uns das auch nicht weiter.

Gruss
Elroy

 

[bobomampf]

Na der Code auf der ersten Seite, ist das letzte was ich gemacht habe beim Divversuch.. Weiter kam ich ja net :/

 

[Elroy]

Na der Code auf der ersten Seite, ist das letzte was ich gemacht habe beim Divversuch.. Weiter kam ich ja net :/

Nun gut hier ist der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meine erste Homepage</title>
<style type="text/css">
<!--
#Content {
    width: 930px;
    height: 100%;
    background-color: #DDD;
    margin: 0 auto;
}
#left {
    width: 445px;
    height: 100%;
    padding: 10px;
    float: left;
    background-color: #DDD;
}
#right {
    width: 445px;
    height: 100%;
    padding: 10px;
    float: right;
    background-color: #DDD;
}
#bottom {
    width: 960px;
    height: 25px;
    margin: 10px auto 15px auto;
    padding-top: 4px;
    border-top: solid 2px #000;
    text-align: left;
    clear: both;
}
-->
</style>
</head>
<body>
 <div id="Content">
    <div id="left">
     ...
    </div>
    <div id="right">
     ...
      </div>
</div>
<div id="bottom">
...
</div>

</body>
</html>

Ich habe das mit Fülltext ausprobiert, es kann also nicht sein das es bei mir geht und bei dir nicht.

Getested mit dem IE9 und Firefox 3.6

Gruss
Elroy

 

[bobomampf]

Danke dir vielmals, aber genau so weit war ich eben bis ich es aufgegeben habe..
Ganz genau das hatte ich schon und hierbei ist eben das Problem folgendes:

 

[Elroy]

Hallo.

Die Lösung zu deinem Problem heisst Faux Columns.

Und wie das funktioniert kannst du hier nachlesen: Faux Columns Technik » KS Webdesign - Der Blog
ES gibt noch viele andere Artikel zur Faux Columns Technik. Einfach mal goggeln.

Gruss
Elroy

 

[bobomampf]

Geil.. So klappts perfekt :) Danke dir vielmals