En footer som täcker 100% bredd och en div ovanför som har negativ marginal neråt ?

Trädvy Permalänk
Medlem
Plats
öhh..
Registrerad
Maj 2004

En footer som täcker 100% bredd och en div ovanför som har negativ marginal neråt ?

Godkväll.

Har googlat problemet, och vet inte om det är jag som suger på att googla eller om det bara är svårt att hitta, men iaf.

Jag håller på med en design nu, ett slutarbete i kursen Multimedia B på gymnasiet, och jag har en header som täcker 100% av bredden på sidan. I den (eller egentligen under) ligger det tre divar, en med loggan till sidan, och på vardera sidan om den två stycken divar. Dessa har en negativ marginal uppåt, så de ligger där de ska.

Mitt problem är iallafall att jag vill ha exakt samma sak på nederdelen av sidan, men om jag lägger en div innan footern med negativ marginal neråt så fuckar hela layouten ur om textinnehållet på sidan överstiger "mitten-divens" min-height. Footern ligger kvar där den ligger, men divarna flyttas neråt. Det jag vill uppnå är ju att de tre divarna ska ligga ovanpå footern hela tiden, oavsett textinnehåll.

Någon som har en ide ? Säg till ifall ni vill ha en mer utförlig beskrivning av problemet så kan jag bifoga bilder osv också.

Trädvy Permalänk
Hedersmedlem
Plats
Sala
Registrerad
Jul 2001

Du har möjligvis inte lite nuvarande kod att visa? Det blir alltid lättare att se problemet och finna en lösning då.

Är du lycklig nu?

Frågor och funderingar angående modereringen tas med mail, inte genom forumet. dennizpop@sweclockers.com

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Maj 2007

Jag tror att du vill använda en lite annan teknik för att lösa problemet. Negativa marginaler är inte det optimala sättet för att lösa problemet. Det du vill använda är elementet "float: left". Här är ett litet exempel:

<div id="wrapper" style="width: 100%;"> <div id="header" style="width: 100%; height: 100px; float:left; background-color: green;"> <div class="placeholder" style="width: 30%; height: 100%; float: left; background-color: red">   </div> <div id="logo" style="width: 40%; height: 100%;float: left; background-color: white;"> <h1>Logo</h1> </div> <div class="placeholder" style="width: 30%; height: 100%; float: lefth; background-color: red">   </div> </div> <div id="content" style="width: 100%; height: 300px; float: left; background-color: blue;"> <h1>Content</h1> </div> <div id="footer" style="width: 100%; height: 100px; float:left; background-color: green;"> <div class="placeholder" style="width: 30%; height: 100%; float: left; background-color: red">   </div> <div id="footer_logo" style="width: 40%; height: 100%;float: left; background-color: white;"> <h1>Logo</h1> </div> <div class="placeholder" style="width: 30%; height: 100%; float: lefth; background-color: red">   </div> </div> </div>