overflow i DIV

andi · 2007-09-07, 15:10

Har ett DIV-element vars bredd är konstant men vars höjd beror på innehållet.

Innehållet består av 1 eller flera andra divar som kan vara av olika höjd från gång till gång men som alla är lika höga och breda.

Jag vill att alla inre element hamnar bredvid varandra och att höjden på det omslutande elementet blir samma som de inre elementen. Om det är så många inre element att de inte får plats, vill jag att alla elementen fortfarande ligger bredvid varandra och att det omslutande elementet bara får en horisontell scrollbar. Som det är nu flyttas några inre element ned
till en ny rad om de inte får plats.

Hur löser man detta?

hnn · 2007-09-07, 16:35

overflow-y?

andi · 2007-09-07, 17:57

Citat:

Originally posted by hnn@Sep 7 2007, 16:35
overflow-y?

Jo, jag satt och testade lite med det, men eftersom det stora elementet inte har någon bestämd höjd så blir det det elementet som expanderar i höjdled och får flera rader...

pelrik · 2007-09-08, 15:25

Är ingen expert på området men kan du inte ha höjden i % och overflow y?

mr_lundis · 2007-09-08, 20:08

Sätt en bestämd brädd på elementet + overflow: auto;. Då expanderar elementet i höjdled efter behov. För att få elementen inuti att flyta till vänster använder du float: left;.

Att göra så fungerar fint i FF och Safari (windows), dock inte riktigt lika bra i IE 6, där blir det scroll åt båda hållen (för att kompensera för det utrymme den nya scrollbaren tar upp, overflow-y fungerar ännu sämre). Har dock ej möjlighet att testa i IE 7, då det inte går att köra installationen pga någon konstig Windows bugg.

andi · 2007-09-08, 21:09

Citat:

Originally posted by mr_lundis@Sep 8 2007, 20:08
Sätt en bestämd brädd på elementet + overflow: auto;. Då expanderar elementet i höjdled efter behov. För att få elementen inuti att flyta till vänster använder du float: left;.

Menar du såhär:

Citat:

<html><head>
<style>

div.a { width: 200px;
overflow: auto;
border-width: 1px;
border-style: solid; }

div.b { float: left;
width: 50px;
border-width: 1px;
border-color: green;
border-style: solid; }

</style>
</head>

<body>
<div class="a">
<div class="b">ett </div>
<div class="b">varierande</div>
<div class="b">antal</div>
<div class="b">kolumner</div>
<div class="b">på</div>
<div class="b">samma</div>
<div class="b">rad?</div>
</div>

</body></html>

Fast nu så växer det yttre elementet på höjden när bredden inte räcker. Jag vill ha en scrollbar horisontellt istället...
Värst vad knepigt det här var...

mr_lundis · 2007-09-09, 12:28

Ahh, vilken miss av mig! Jag testade själv bara med lite text som utfyllnad. Divar med "float" beter sig inte på samma sätt, vilket jag inte tänkte på, lat som jag är. ^^

Detta har att göra med vilken "display typ" elementet är. Jag orkar dock inte gå igenom allt här, det skulle bli en hel artikel. Man kan visserligen ändra den, men då följer ett gäng nya problem...

Jag måste nog fundera på hur man kan lösa detta, har inget bra svar nu...

elofsson · 2007-09-09, 13:28

Någon som kan bekräfta att overflow inte fungerar i versioner före IE7? Eller är det jag som gjort något annat fel? Firefox vet jag inte för där har jag inga äldre versioner att testa med. Finns det något annat alternativ för att uppnå samma effekt som overflow i äldre webbläsare?

Edit: Ser att första frågan delvis besvarats ovan. Men frågan kvarstår om det finns någon alternativ lösning. Tacksam för tips!

andi · 2007-09-09, 16:39

Jag får nog göra en fullösning med ett litet javascript när sidan laddas. Om man kollar höjden på de inre elmenten så kan man sätta den höjden på det yttre elementet också, då hamnar all overflow till höger.

Tack för all hjälp iallafall, om ni hittar någon lösning får ni gärna posta den här!

robert.liljedahl · 2007-09-23, 13:48

Släng upp ett testexempel. Det blir mycket lättare att få en ordentligt överblick av vad
du försöker göra då - samt att kunna hjälpa.

/Robert

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

overflow i DIV