HTML/CSS: Wrapper sträcker inte ut sig runt innehållet

2014-03-05 16:12

Permalänk

Andi2k11

Medlem

Plats: Vellinge
Registrerad: Nov 2002

●

HTML/CSS: Wrapper sträcker inte ut sig runt innehållet

Har nu kommit igång och ska försöka göra ett eget tema till Wordpress. Än så länge är det bara layouten jag håller på.

Jag har suttit ett tag nu och jag kommer verkligen inte på vad som är fel. Två saker upplever jag som ett fel, eller det är inte så jag vill ha det, men det är så det har blivit.

Jag försöker efterlikna layouten på denna bilden, med undantag för att jag vill ha en sidfot också.

De två problemen jag har just nu är:

Sidfoten glider in under det högra nedre rutan om där inte är tillräckligt med innehåll. Varför hamnar den inte under de två fälten?
Varför sträcker sig inte wrappern ut sig när man fyller på med text. Däremot om jag bestämmer en precis höjd CSS koden så fungerar det. Men vill inte bestämma höjden utan att den ska anpassa sig själv. Wrappern är området som är beige.

Ni kan hitta min kod här:
http://jsfiddle.net/63CYF/1/

"Min" CSS kod börjar på rad 183. Koden innan är html5reset.

Jag har testat att plocka bort reset koden men den beter sig på samma sätt. Jag kan verkligen inte komma på varför den gör som den gör.

Visa signatur

Apple Mackbook Pro 15" Retina 2013

Rapportera Redigera

Citera flera Citera

2014-03-05 16:19

Permalänk

RaJon

Medlem

Registrerad: Sep 2013

●

Har bara kollat lite hastigt. Vet inte om jag är med på hur du menar... Men är sluttaggarna rätt placerade när det kommer till article-divarna? Sätt sedan float på footer. Fungerade här

Senast redigerat 2014-03-05 16:30

Rapportera Redigera

Citera flera Citera

2014-03-05 16:26

Permalänk

Zcalman

Medlem

Plats: Kalmar
Registrerad: Okt 2011

●

Sätt float:left; på footern så tror jag den hamnar rätt, om jag förstod ditt problem med footern rätt dvs.

EDIT:
Float:left; är även svaret på ditt andra problem men inte bara att lägga till det denna gången. Jag skulle nog ha döpt om "wrapper" till "center_wrapper" och bara behållt css:en som gör att den ligger centrerad. Sedan i den skulle jag skapat en ny "wrapper" som får float:left plus lite annan önskad kosmetiskt css (bg-color osv). Sedan tror jag även att main behöver ha float:left; för att den inte ska placeras fel.

Detta är bara hur jag brukar göra, finns säkert någon lösning som kanske är bättre och enklare.

Senast redigerat 2014-03-05 16:36 Svarar på problem 2

Visa signatur

Tänk på att citera så kanske jag hittar tillbaka

http://zcalman.se

Rapportera Redigera

Citera flera Citera

2014-03-05 16:57

Permalänk

crake

Medlem

Plats: Göteborg
Registrerad: Dec 2010

●

Testa att lägga en clearfix på wrappern, t.ex. genom att ge den klassen group och lägg in detta i din css:

.group:after {
  content: "";
  display: table;
  clear: both;
}

Rapportera Redigera

Citera flera Citera

2014-03-05 17:20

Permalänk

kevvs

Medlem ★

Plats: Landskrona
Registrerad: Nov 2008

●

Lägg till class="clearfix" på id="main" och lägg sedan till nedanstående kod i ditt css-dokument.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Rapportera Redigera

Citera flera Citera

2014-03-05 18:32

Permalänk

Andi2k11

Medlem

Plats: Vellinge
Registrerad: Nov 2002

●

Tack för hjälpen. Clearfix på wrappern fungerade skitbra!

Visa signatur

Apple Mackbook Pro 15" Retina 2013

Rapportera Redigera

Citera flera Citera

HTML/CSS: Wrapper sträcker inte ut sig runt innehållet

HTML/CSS: Wrapper sträcker inte ut sig runt innehållet

Externa nyheter

Spelnyheter från FZ