[Martin]

Jag har suttit och försökt förstå varför följande inte fungerar i firefox, vill att högerelementet ska ligga till höger om vänsterelementet men istället hamnar högerelemetet under vänsterelementet, varför? Är det något mer jag måste lägga till?


CSS:
#Vansterelement
{
width: 152px;
margin-top: 10px;
margin-right: 5px;
padding: 5px;
float: left;
}

#Hogerelement
{
width: 595px;
margin-top: 10px;
margin-left: 5px;
}

Html-Kod:
<div id="Vansterelement">Text</div>

<div id="Hogerelement">Text</div>

[Lindahl]

Troligtvis är containern det hela ligger i för smal.

[Robert]

testa även float:right; på Hogerelement

[obe]

Testa:
#Hogerelement
{
width: 595px;
margin-top: 10px;
margin-left: 157px;
}

Ett bra tips är att lägga på en strict dtd också så blir det någorlunda lika i alla webb-läsare också.

[Lindahl]

Sorry, tolkade "under" som "nedanför". "Bakom" är kanske mer korrekt.

[elofsson]

Originally posted by Lindahl@Nov 25 2005, 21:47
Troligtvis är containern det hela ligger i för smal.

Håller med Lindahl. Din kod fungerar när jag testar. En box till vänster och en till höger. Så det är antagligen så att de inte riktigt får plats bredvid varandra. För att testa om det är så kan du minska width'en på boxarna och se om det blir som du tänk dig.

[Martin]

Var lite dåligt förklarat men jag menar alltså att mitt högerelement hamnade bakom mitt vänsterelement. Jag fick ju lite tips och det fungerar om jag sätter margin-left till 157 på mitt högerelement. Men varför? Räknas inte marginalen mot det element som ligger till vänster? Då borde ju det bli 157px mellan elementen?

När jag får samma problem på ett annat ställe att ett element som ska ligga nedanför ett annat hamnar bakom det övre elementet försöker jag öka margin-top. Då fungerar det i firefox men då ökas marginalen mellan elementen i IE istället. Kan nån förklara hur man får till det på ett snyggt sätt?

[obe]

Originally posted by Martin@Nov 27 2005, 18:27
Var lite dåligt förklarat men jag menar alltså att mitt högerelement hamnade bakom mitt vänsterelement. Jag fick ju lite tips och det fungerar om jag sätter margin-left till 157 på mitt högerelement. Men varför? Räknas inte marginalen mot det element som ligger till vänster? Då borde ju det bli 157px mellan elementen?

När du säger att ett element ska vara float så innebär det att det inte påverkar flödet. Texten "flyter" runt elementet.

Läs mer på: http://www.w3.org/TR/REC-CSS2/visuren.html

[maggah]

Vad din kod säger är att den ena diven ska ligga 5px från webläsarfönstrets vänsterkant och 10 från toppen.
Den andra ska ligga nästan likadant med den enda skillnaden att den ska ha en padding också.
Så som vanligt tolkar ff det helt rätt och lägger divarna som det är sagt.
För att du ska få dem att lägga sig skilda från varandra så måste du lägga till float. Då kommer de lägga sig bredvid varandra tills webläsarfönstret inte längre har plats med dem och flytta ner den som inte får plats under den andra (inte ovanpå varandra). Bra om man inte vill att någon ska behöva scrolla sidledes.

M v h

Magga