Bilden vill inte hålla sig innanför div:en

Element som har align="right|left" (eller float) tar inte upp plats i själva layouten

Se:
http://www.w3.org/TR/REC-CSS2/visuren.html#floats

där står det "Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist."

Aha! Man lär sig något nytt varje dag. :)

Jag löste det så här med hjälp av mikkeX
HTML

<div class="content">
	<a href="bilder/socofonda/socofonda1.jpg"><img src="bilder/socofonda/thumbs/th_socofonda1.jpg" width="150" height="61" alt="Banut 850"></a>  
	Banut 850 med borrmotor. Halle, Belgien
	<div class="clear"></div>
</div>
</div>

CSS

.clear	{
	clear: both;
	font-size: 0px;
	margin: 0px;
	padding: 0px;
	}

.content {
	position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width: auto;
	min-width: 220px;
	margin: 0px 230px 20px 185px;
	border-top:2px solid #C0C0C0;
	border-left:0px solid #C0C0C0;
	border-bottom:2px solid #C0C0C0;
	border-right:0px solid #C0C0C0;
	background-color: #FFFFC0;
	color: #000000;
	padding: 10px;
	z-index: 3;} /* This allows the content to overlap the right menu in narrow windows in good browsers. */

/* I've heard this called the "be nice to Opera 5" rule. */
html>body #navAlfa {width: 128px;}

.content img	{
	position: relative;
	border: 0;
	float: left;
	padding-right: 5px;
	padding-bottom: 5px;
	z-index:3;
	}

Mvh
Jan-Olov

Kan någon vara snäll och förklara för mig varför detta löses genom att man lägger till en tom div med clear:both efter.
Är detta ett hack? Finns det andra lösningar på detta problem?

Jupp - det är ett sorts hack...
Man inför lite lämplig html för att komplettera vad som kan och inte kan göras direkt med CSS ;)

realworldstyle.com skrev:

What is the div class="spacer" in there for? When you float an element with CSS, it no longer takes up any "space" and any background and/or border will show up above the images instead of surrounding them. We need to add some content other than the floated DIVs into the container DIV to force the background or border to contain the floated elements as well. Add this to your style sheet to take care of that:

div.spacer {
  clear: both;
  }

.spacer i citatet motsvarar .clear i lösningen ovan ;)

URL: till sidan citatet hämtats ifrån: http://realworldstyle.com/split.html

Ah, tack för länken.

Tycker att man borde kunna lösa detta utan hack dock...

Jag hade samma problem precis och letade därför upp den här tråden igen. Dock har den här lösningen (en tom div med clear:both) en jobbig sidoeffekt i Internet Explorer. Hack-diven skapar nämligen extra utrymme längst ner i den omgivande diven (se bild). Hur kommer man ifrån detta?

Och så bilden...

Hmm...
Ser ut att vara ungefär en tom rads höjd som diffar i MSIE
Vad händer om du kör med

<div style="clear:all;line-height:1px;font-size:1px">&amp;nbsp;</div>

alternativt bråkar lite med padding/margin/border i den div:en ?

Lite kod skulle inte skada...

jarvklo skrev:

Vad händer om du kör med [...]

Perfekt! Detta fungerar:

div.floathack {
	clear:both;
	line-height:1px;
	font-size:1px
}

<div class="floathack">&amp;nbsp;</div>

Nu har jag använt koden i mitt inlägg ovan, och det har fungerat alldeles utmärkt. Tills i dag när SBBK ringer och påpekar att texten på deras nyhetspuff inte syns förrän man markerar den (i Internet Explorer).

Web-Tor hjälpte mig fundera ut att boven var "clear:both" så nu undrar jag förstås hur man kommer runt detta. Tar jag bort "clear:both" tar bilden inte upp något utrymme och man är tillbaka till ursprungsproblemet.

Se fenomenet: http://www.sbbk.se

Man kan även clear:a en float utan extra html kod:
http://www.positioniseverything.net/easyclearing.html

Det står i artikeln att det inte riktigt funkar i Firefox, men detta fungerar alldeles utmärkt i de senaste buildsen. Sen själv punkten som han använder kan man köra utan, testade i Opera och NN7 och Firefox 0.8+

Underbart! Det fungerar ju! :)