Gå til innhold

CSS-float i DIV-tags

Karlstad

Anbefalte innlegg

Karlstad

Karlstad

Skrevet
Skrevet

Veit ikke om overskrifta er god nok, men jeg har trøbbel med plassering av forskjellige DIV's, men det gjelder bare i Firefox 2.

Meningen var å bruke dette i et bildegalleri, der bildene ble vist i tre rader og tre kolonner, men dette fungerer tydeligvis ikke helt som jeg vil.

 

På denne adressen har jeg lagt ut hva jeg jobber med i rein HTML, så kanskje noen forstår greia.

Nå har jeg testa det i Opera og IE7, og Opera viser det akkurat sånn jeg vil ha det, IE7 har en liten glippe mellom de to første kolonnene og den siste, mens Firefox 2 viser med skille mellom andre og tredje kolonnen. Hvorvidt det fungerer i IE6 og Firefox 1.5 veit jeg ikke, så det hadde jo og vært greit å få tilbakemelding på :)

 

Noen som har gode råd til hvordan jeg kan ordne dette i Firefox (2)?

 

 

index.html

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
<title>Galleri</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Innhold:<br /><br />
<div class="picHold">
<div class="picHolder">
<img src="/hemmelig/bilder/1.jpg" height="100" width="100" border="0" alt="" /><br /><small>1.jpg</small>
</div>
<div class="picHolder">
<img src="/hemmelig/bilder/2.jpg" height="100" width="100" border="0" alt="" /><br /><small>2.jpg</small>
</div>
<div class="picHolderEnd">
<img src="/hemmelig/bilder/3.jpg" height="100" width="100" border="0" alt="" /><br /><small>3.jpg</small>
</div>
<div class="picHolder">
<img src="/hemmelig/bilder/4.jpg" height="100" width="100" border="0" alt="" /><br /><small>4.jpg</small>
</div>
<div class="picHolder">
<img src="/hemmelig/bilder/5.jpg" height="100" width="100" border="0" alt="" /><br /><small>5.jpg</small>
</div>
<div class="picHolderEnd">
<img src="/hemmelig/bilder/6.jpg" height="100" width="100" border="0" alt="" /><br /><small>6.jpg</small>
</div>
<div class="picHolder">
<img src="/hemmelig/bilder/7.jpg" height="100" width="100" border="0" alt="" /><br /><small>7.jpg</small>
</div>
<div class="picHolder">
<img src="/hemmelig/bilder/8.jpg" height="100" width="100" border="0" alt="" /><br /><small>8.jpg</small>
</div>
<div class="picHolderEnd">
<img src="/hemmelig/bilder/9.jpg" height="100" width="100" border="0" alt="" /><br /><small>9.jpg</small>
</div>
</div>
</html>

style.css

Klikk for å se/fjerne innholdet nedenfor

div.picHolder {
width: 100px;
min-height: 100px;
border: 1px solid gray;
padding: 5px;
margin-right: 3px;
margin-bottom: 3px;
text-align: center;
float: left;
}
div.picHolderEnd {
width: 100px;
min-height: 100px;
border: 1px solid gray;
padding: 5px;
margin-bottom: 3px;
text-align: center;
clear: right;
}
div.picHold {
width: 100%;
}

Lenke til kommentar

Videoannonse

Videoannonse
Annonse

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...