Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Footern anpassar inte sin position

1
Skriv svar
Permalänk
Medlem
●

Footern anpassar inte sin position

Hej!

Nu har jag fastnat i strukturen av en ny hemsida jag håller på och bygga och jag hittar helt enkelt inte problemet.

Mina div-ar:

<body>
<div id="main">
  <div id="head"> </div>
  <div id="content">
    <div id="left"> </div>
    <div id="right"> </div>
  </div>
</div>
<div id="footer"> </div>
</body>
#main {
	width:945px;
}
#head {
	width:100%;
}
#content {
	width:100%;
}
#left {
	width:25%;
	float:left;
}
#right {
	float:right;
	width:75%;
}
#footer {
	width:100%;
	height:200px;
}

Såhär har jag byggt upp grunden och den ser likadan ut som på en liknande sida som jag har gjort. Men när jag fyller #left och #right med diverse innehåll så gömmer sig footern bakom allting precis under headern.

Jag har möblerat om lite i koderna men de går bara inte och jag börjar bli irriterad då det är ett så simpelt fel.

Så jag hoppas någon av er ser något jag inte ser, eller vet något enkelt fix för detta.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jupp det gör det! Mitt bra tips är att läsa på hur float påverkar ett element. Mitt snabba och dåliga är att sätta "overflow: hidden" på content.

Visa signatur

Dur ru - dum.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Basti:

Jupp det gör det! Mitt bra tips är att läsa på hur float påverkar ett element. Mitt snabba och dåliga är att sätta "overflow: hidden" på content.

Gå till inlägget

Snabbt ja, men inte dåligt. Ett av de bättre sätten faktiskt

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Basti:

Jupp det gör det! Mitt bra tips är att läsa på hur float påverkar ett element. Mitt snabba och dåliga är att sätta "overflow: hidden" på content.

Gå till inlägget

Man får tacka för det fungerade hur bra som helst.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Många gånger så gör man misstaget att inte använda:

.content {

clear:both;

}

på det element som "omsluter" de float:ade elementen.

Prova det och se hur det påverkar.

Glöm inte heller att ha position: relative på det element som omsluter dom flytande elementen.

Några småsaker som kanske kan spara dig lite huvudvärk.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av BlueEyes:

Många gånger så gör man misstaget att inte använda:

.content {

clear:both;

}

på det element som "omsluter" de float:ade elementen.

Prova det och se hur det påverkar.

Glöm inte heller att ha position: relative på det element som omsluter dom flytande elementen.

Några småsaker som kanske kan spara dig lite huvudvärk.

Gå till inlägget

Attributet clear: använder man när man vill att ett element inte ska ha flytande element bredvid sig. Position:relative använder man när man vill att ett underelement som placeras med koordinater ska utgå ifrån parent-elementets. Det har inte heller någon effekt i detta fall.

När det handlar om att ett parent-element ska anpassa sin höjd efter utstickande flytande element fungerar det, precis som redan angetts, att använda overflow:hidden. Ett alternativ till detta är att använda en så-kallad "clearfix" på flytande element, vilket effektivt sett infogar ett osynligt extra element med clear:both. Då elementet inte vill ligga bredvid några floats lägger det sig under, vilket leder till att container-elementet expanderas.
Detta är enligt mig bra mycket fulare än det enkla overflow:hidden. position:relative behövs inte i något av fallen.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar