Div tag med bilde og float

29. oktober 2008

Dårlig tittel. Kom ikke på noe bedre.

Jeg holder på med en nettside, der det skal være en "meny" på siden. Den inneholder tittel, litt tekst og et bilde.

Teksten skal være til venstre i div'en og bildet til høyre. Når jeg setter float="right" på bildet så kommer bildet utenfor div'en fordi det er høyere enn teksten. Hvordan kan jeg fikse det?

css:

HTML-kode

.item{
	margin-top: 15px;
	text-align:left;
	background-color: #00FF33;
}

.itembilde{
	float:right;
}

.itemtittel{
	color: #000000;
	font-size: 12px;
	font-weight: bold;
}

.itemtekst{
	color: #636363;
	font-size: 10px;
	font-weight: normal;
}

.itemles{
	color: #6D0909;
	font-size: 10px;
	font-weight: bold;
}

html:

HTML-kode

<div class="item">
	<img class="itembilde" width="100" src="img/folk/liv og lyst5.jpg" />
	<span class="itemtittel">tittel på item</span><br />
	<span class="itemtekst">Kort tekst her.</span><br />
	<span class="itemles">Les mer...</span>
    
</div>
<div class="itembunn" /></div>

itembunn inneholder bare en bgcolor med høyde 1px for å vise bunnen på item.

z0p

uʍop ǝpısdn

3.814 906

29. oktober 2008

Standardløsningen er vel å legge et nytt element med clear: both i item-wrapperen

Sist endret av z0p; 29. oktober 2008 kl. 14:46.

fulloggal

Trådstarter

3.415 380

29. oktober 2008

Det virket ikke z0p.

Hvis jeg forstod rett så skulle det bli sånn?

.item{
margin-top: 15px;
text-align:left;
background-color: #00FF33;
clear:both;
}

marfo

390 44

29. oktober 2008

Prøv slik:

Kode

.item{
margin-top: 15px;
text-align:left;
background-color: #00FF33;
}
.itembilde{
float:right;
}
.itemtittel{
color: #000000;
font-size: 12px;
font-weight: bold;
}
.itemtekst{
color: #636363;
font-size: 10px;
font-weight: normal;
}

.clear{
clear:both;
display:block;
}

Kode

<div class="item">
<img class="itembilde" width="100" src="img/folk/liv og lyst5.jpg" />
<span class="itemtittel">tittel på item</span><br />
<span class="itemtekst">Kort tekst her.</span><br />
<span class="itemles">Les mer...</span>
<span class="clear"></span>
</div>
<div class="itembunn" /></div>