webForumDet fria alternativet

En två-kolumn-layout

2 svar · 349 visningar · startad av echoSwe

echoSweMedlem sedan nov. 20041 189 inlägg
#1

Tja

En kolumn. margin: 0 auto; - wrapper.

I denna, som child, en header - header.

Ännu ett child, leftColumn, samt ännu ett, rightColumn.

Sist ett child till wrapper, footer.

wrapper- min-height: 100%; (i FF)
leftColumn- float:left; width: ...; padding-bottom: 50px;
rightColumn- float:right; width ...; padding-bottom: 50px;
footer- margin: 0 auto; margin-top:-50px; height: 50px;

Nu vill jag att footern inte ska gå upp för långt om man minskar viewport vertikalt, under eller över mina floatade kolumner som genom att ha varit floatade inte tar upp utrymme.

Då har jag tre val - antingen att sätta "overfloat: auto;" på min wrapper. Detta ser fult ur i IE, då det kommer scrollbars på "wrapper" om man minskar viewport...
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Eller att använda en div till:

<div wrapper>
    <div wrapper2>
          <header> osv ...
    </div>
</div>

och använda http://orderedlist.com/articles/clearing-floats-fne/ det vill säga att floata wrapper2 fast ha den till 100% width. Detta borde funka i IE, har inte testat.

eller att använda http://www.positioniseverything.net/easyclearing.html och lägga klassen "clearfix" på min wrapper. Detta funkar så vitt jag vet i IE.

För grejen är ju att jag vill ha mer än en kolumn (och om man inte floatar båda kolumner utan bara använder margin på den ena, så kommer IE att ha problem med ett par pixlar) och en footer som går in över wrapper.

Hur hade ni löst det?
Lägger ni också padding i era kolumner för att göra plats för footern?

jarvkloMedlem sedan juli 20013 378 inlägg
#2

Nja - jag brukar lägga till en tom div inuti "wrapper" som är lika hög som footern istället för att ha padding-bottom i kolumnerna...

Exempel: http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html

Verkar funka bra överlag även om jag väljer float: left och float: right på respektive vänster och högerkolumn (vilket exemplet alltså inte gör)

echoSweMedlem sedan nov. 20041 189 inlägg
#3

Tjena

Jo, den har jag sett :), och att lägga till en sådan div är ju w3c's rekommendation, men snacket går om att det är ett sätt som tyvärr innebär markup för något om inte tillför någon information till sidan. Men det funkar ju som förväntat :).

<annan tråd>
Har du nån aning om hur man kan få body att uppföra sig som html elementet då? Med bakgrunden och så?
</annan tråd>

134 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)