skumt fel med lager

2 svar · 263 visningar · startad av Troll 27 juni 2006

TrollMedlem sedan dec. 2003229 inlägg

Frågan27 juni 2006 15:30#1

hejsan!

jag har råkat ut för ett problem jag inte haft tidigare, av någon anledning vill inte mina lager ligga där de ska.

Jag har ett lager som innehåller två andra lager, ena med text och det andra med en bild. texten ska vara på den vänstra sidan och bilden på den högra. Jag satte helt enkelt float:right; på lagret med bilden men då sträcker den sig över lagret som omsluter de båda.

Varför?

<div id="maincont">

 <div id="maintext">
 text
 </div>

 <div id="mainbild">
 <img src="bild.png" width="440" height="500">
 </div>

</div>

.css

#maincont {
border: 1px solid #000;
background-color:#fff;
margin-bottom:8px;
}
#maintext {
width:338px;
background-color:#ccc;
}
#mainpic {
background-color:#999;
width:450px;
float:right;

Allt detta omsluts i sin tur av en div som är 800px bred.

Är det något jag helt enkelt har glömt att tänka på?

TrollMedlem sedan dec. 2003229 inlägg

27 juni 2006 15:41#2

Har även testat att sätta båda till float:left; och då blir det rätt förutom att diven under allt blir paj och smälter ihop med maincont-diven :(

tantenMedlem sedan nov. 20051 596 inlägg

27 juni 2006 16:56#3

Eftersom det är så lite kod du visade så blir mitt funderande bara lite just funderingar.
Tror att det ofta är så att man sätter i gång med css innan html-sidan är klar. Då glömmer man lätt bort att man kan använda p och img inne i divvarna och se till att de uppför sig som man vill I stället sätter man ofta dit den ena divven efter den andra, vilket i och för sig går, men är bitvis väldigt onödigt.
Ska försöka visa vad jag menar.Detta är egentligen det enda som behövs. Bilden skulle kunna vara bakgrundsbild i stället och då blir html ännu "renare".

<div id="maincont">
 <div id="maintext">
 <p>text</p>
 <p><img src="bild.png" width="440" height="500"></p>
 </div></div>

maincontent bestämmer du då vart och i vilket förhållande den ska vara till resten av sidan. Jag har inte gjort något av det eftersom jag inte vet...
maintext håller ihop innehållet av p och img inne i divven och har egentligen ingenting med resten av sidan att göra, mer än att den tar sin plats.

#maincont {border: 1px solid #000;background-color:#fff;margin-bottom:8px; width: 800px;}
#maintext {width:100%;background-color:#ccc;}
#maintext p{ float: left;}
#maintext img {background-color:#999;float:right;}

Förmodligen ser detta inte alls ut som du vill och nu går det att göra på många fler sätt, men jag visar det absolut enklaste, sedan är det bara att "märka vidare"...
Men kanske sätter det igång lite tankar på andra sätt att lösa problem inne i divvar ;) Och vad mycket lättare det blir om html-sidan är klar... :)