CSS Problem mit width 100% und float

[Pi_]

*und position fixed nicht float :S

Hallo

Ich habe folgendes problem. Ich möchte einen unten an den boden des browsers gefixten div eine prozentuale breite geben.

Hier mein code:
html:

		<div id="foot">
			<div id="foot_content">
			</div>
		</div>

css:

#foot {
	width: auto;
	height: 40px; 	 
	background: #E5E5E5;
	border: 4px solid #1a1a1a; 
	border-bottom: none; 
	position: fixed; 
	bottom: 0px;
}
#foot_content { width: 90%;}

EDIT: Das problem ist das der div foot immer nur die breite hat die der text der in ihm steht hat und nicht die die ich in foot_content festgelegt habe

Danke im vorraus

 

[cartridge_case]

ehm die problembeschreibung fehlt...

 

[Daaron]

Volle Breite, 40 hoch?

position: fixed;
left:0;
right: 0;
bottom: 0;
height: 40px;

 

[Pi_]

Ne am besten 100% von dem div in den foot liegt. Dieser hat aber auch eine prozentuale breite.

 

[craine]

öhm ich verstehe auch nicht ganz.
Meinst du

#foot {
width: 100%

?

Und was hat float damit zu tun? ^^

 

[Daaron]

Am Besten machste mal ne Skizze, was du wie brauchst.

 

[cartridge_case]

hat denn foot die richtige volle breite?

 

[Pi_]

Hier mein beispiel: http://ich1234566.bplaced.net/
Alles scheint zu funktionieren aber wenn man das fenster kleiner zieht dann wird die prozentuale breite vom foot nicht mehr respektiert. Also hängt er rechts rüber

Und die width 100% ist die größe vom body und nicht vom wrapper der nur 90% hat.

 

[cartridge_case]

max-width: 1200px; aus div wrapper funkt dir da rein...

 

[Pi_]

Aber es muss doch möglich sein das ein gefixter div sich von der breite dem container anpasst oder nicht?

 

[cartridge_case]

macht er doch auch o.O

 

[Pi_]

ja aber nur weil ich jetzt maxwidth auf 1192 gesetzt habe

 

[Daaron]

Fixed bezieht sich immer auf den Viewport, nie auf das Elternelement.

Aber, simple Lösung:

height: 40px;
background: #E5E5E5;
border: 4px solid #1a1a1a;
border-bottom: none;
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin-left: 5%;
margin-right: 5%;

Schon ist das Ding immer 90% des Viewports breit sowie unten mittig fixiert.

 

[cartridge_case]

hä? ich versteh es jetzt wirklich nicht mehr...

musst dich mal besser ausdrücken oder wirklich ne zeichnung machen...

 

[Pi_]

Ok also ich möchte folgendes:
Der div untent hat position fixed und ich möchte das sich die breite exakt wie bei der box oben verhält.
Wrapper:

#wrapper {
	width: 90%;
	max-width: 1200px;
	min-width: 800px;
}

Die box hat die eigentschaften:

#box {min-height: 80px; background: #E5E5E5; border: 4px solid #1a1a1a; margin-top: 25px;}

und der foot diese:

#foot {
	width: auto;
	height: 40px; 	 
	background: #E5E5E5;
	border: 4px solid #1a1a1a; 
	border-bottom: none; 
	position: fixed; 
	max-width: 1192px;
	bottom: 0;
	width: 100%;
}

Doch dabei kommt nur das raus:
http://ich1234566.bplaced.net/

Auf den ersten blick sieht alels richtig aus aber wenn man das fenster in der breiter verkleinert bemerkt man das die breite von foot sich nicht ändert. und genau das ist es was ich möchte. das er sich EXAKT wie die obere box verhält

 

[craine]

Das liegt am

position: fixed;

Du könntest es mit

position: relative;

realisieren.

Dann musst du es relativ zum Elternobjekt platzieren.

 

[Pi_]

Das würde jedoch bedeuten, dass der foot nicht mehr unten am boden fixiert ist.

 

[Standar(D!)]

Weise deinem footer die Eigenschaften (Breite) des wrappers zu. Anschließend müsstest du von der Breite des Footers noch 8px (Rahmenbreite links und rechts von #box) subtrahieren. Wegen der relativen Angabe in Prozent geht dies aber nicht. Abhilfe schaftt hier die css-Eigenschaft box-sizing

Damit sollte es funktionieren:

#wrapper,#foot{
	-webkit-box-sizing: border-box;
	-khtml-box-sizing:  border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	width: 90%;
	max-width: 1200px;
	min-width: 800px;
}

#foot {
	
	height: 40px; 	 
	background: #E5E5E5;
	border: 4px solid #1a1a1a;
	border-bottom: none; 
	position: fixed; 
	bottom: 0;	
}

 

[craine]

Das würde jedoch bedeuten, dass der foot nicht mehr unten am boden fixiert ist.

Deswegen schrieb ich ja, dass du es dann relativ zu einem anderen Element platzieren müsstest.