Div lägger sig under annan div

Jag har lite problem enligt bifogade skärmdump. Som ni ser flyter den rosa rutan ut under bilden. Jag skulle vilja att så länge texten ovanför är så kort att den rosa rutan hamnar ovanför bildens nederkant ska den krympas ihop till bredden på textstycket. Men om rutan pga textens längd hamnar under bilden ska den ha full bredd.

Html-kod:

<div id="latestpost">
			<img src="senaste.gif" />
			<div class="wrapper">
				<div id="bloggbild">
					<img src="barto-01.jpg" /></div>
				
				<div id="entry">
					<h1>Phasellus vel dui Barto <span id="timestamp">12 maj</span></h1>
					<p><--- text ---></p>
				</div>
				<div id="latestpostmeta">
					<p><--- text i den rosa rutan ---></p>
				</div>
				<div class="clear">
				</div>	
				
			</div>
			
			<img src="latest_footer.gif" class="footer" /></div>

CSS-kod:

#latestpost {
	background-image:url(latest_bg.gif);
	background-repeat:repeat-y;
	padding:0;
}

.wrapper {
	padding:5px 50px;
}

#bloggbild {
border:5px solid #fff;
float:left;
margin-right:20px;
padding:0;
}

#bloggbild img {
margin:0;
padding:0;
}

.clear {
clear:both;
}

#latestpostmeta {
background-color:#FCF4F5;
color:#999999;
padding:0;
font-size:70%;
border:1px solid #F1A7AB;
margin-top:10px;
text-align:center;
}

#entry {
}

Tacksam för hjälp :)

Är verkligen koden du postade komplett?

Klippte in i dreamweaver för att testa, men sidan blir inte som på bilden...

koden e ju inte komplett!

den sista <div> är fel placerad. Den ska vara längst in i hörnet under den första div-taggen.

Jag skulle nog ha haft allt i en div med float left på bilden och class på de andra "sakerna".
Men varför har du en h1 här? Kommer det då inte att komma fler h1:or på samma sida? Varför inte ha en stylad p i stället?

wally_91 skrev:

koden e ju inte komplett!

Vad skulle behövas mer menar du? Ni har ju fått allt som gäller just detta.

wally_91 skrev:

den sista <div> är fel placerad. Den ska vara längst in i hörnet under den första div-taggen.

Hur menar du egentligen? Kan du utveckla dig lite?

tanten skrev:

Jag skulle nog ha haft allt i en div med float left på bilden och class på de andra "sakerna".

Allt ligger ju i en div (.wrapper) och bilden har ju redan float:left. Varför skulle de andra ha class för? De förekommer ju bara en gång på sidan, och det skulle ju inte avhjälpa mitt problem.

tanten skrev:

Men varför har du en h1 här? Kommer det då inte att komma fler h1:or på samma sida? Varför inte ha en stylad p i stället?

Jag har h1 för att det är en rubrik och då ska h*-taggarna användas (http://24timmarsbloggen.se/arkiv/2005/01/riktlinje_515aa.php)

Varför skulle det spela nån roll att det förekommer flera h1:or på samma sida?

#latestpostmeta { clear:left; }

[ins] Jaha, bra att jag läser igenom frågan ordentligt innan jag svarar... :r

Jag är osäker på om det går öht. Floatade boxar påverkar bara subsekventa radboxar, inte blockboxar.
[/ins]

SimOnline skrev:

Varför skulle det spela nån roll att det förekommer flera h1:or på samma sida?

Kolla den här tråden. :)

http://www.webforum.nu/showthread.php?t=143869

Allt ligger ju i en div (.wrapper) och bilden har ju redan float:left. Varför skulle de andra ha class för? De förekommer ju bara en gång på sidan, och det skulle ju inte avhjälpa mitt problem.

Ok, kanske lite överdrivet med class på allt, det är bara jag som brukar använda bild inne i samma div som flytande text. Kan du inte prova med att göra om bara
detta till class då och se om du får som du vill. <p class="latestpostmeta"> och lägga in den direkt efter </div> för entry-diven och ha samma värden för .latestpostmeta{.... som du nu har för #latestpostmeta men att du lägger till float:left;
För säkerhets skull så hade jag nog satt höjden på bilden också i css.
Jag tror du får som du vill då.

Fast å andra sidan kan det ju räcka med float på #latestpostmeta också. Kan vara jag som tänker på aldeles för mycket flytande text, för som det är nu så kommer inte din rosa textruta att flyta om den bara delvis kommit en bit under bilden. Då kommer den fortsätta rakt ner. Vill du den ska flyta runt bilden så ska all text in i samma div som bilden...