När man använder float...

[Spider84]

...hur får man då det man angett ska ha float: left; att lägga sig under varandra.

T.ex. jag har tre bilder och tre texter. Bilderna ska ligga längst till vänster och jag har angett att de ska ha float: left; en viss margin-left samt.

Texten har jag gett en class (även bilderna ovan) som jag angett ska vara float: left; så texterna lägger sig till vänster om respektive bild. Jag har då även angett margin-left.



Första jag lägger upp fungerar fint, men nästa vill lägga sig bakom den första så andra bilden lägger sig direkt till höger om första texten och så andra texten direkt till höger om andra bilden.

Hur får jag bilden och texten till den andra att lägga sig under den första?
Finns säker nåt skit enkelt kodning till css som inte jag kommer på.
Har testa att lägga in margin/padding samt att "fuska" med <p></p> i html kodningen, men inget vill fungera speciellt bra.

 

[moiran]

Sv: När man använder float...

är det css-egenskapen "clear" du letar efter kanske?

http://www.w3schools.com/css/pr_class_clear.asp

 

[Spider84]

Sv: När man använder float...

Jo det borde vara det jag letar efter. Hade jag helt glömt bort att den finns. Får det dock inte att fungera.

Kodningen för text och bild:
<div id="clear">
<a href="img/storfalsadjarnsko.jpg"><img class="floatleft" src="img/litenfalsadjarnsko.jpg" alt="Falsad Järnsko" title="Falsad Järnsko" /></a>
<p class="smallright"><br />
<a href="falsad.html"><b>Falsad järnsko</b></a><br />
Tillverkare: Cemtec<br />
Material: Järn<br />
Storlekar: ?<br />
8 sömhål passande ASV sömmar eller liknande.<br />
</p>
</div>

Testade att sätta en borde på diven för att se hur den går, men den vill inte lägga sig runt text och bild utan lägger sig som ett streck ovanför. Fungerade inte alls att använda clear: right; på text classen.

Här är css'n:
.floatleft {
float: left;
margin: 0;
margin-left: 10px;
border: 2px solid #fff;
}

.smallright {
float: left;
border: 2px solid #000;
}

#clear {
clear: right;
border: 2px solid #0000ff;
}

 

[moiran]

Sv: När man använder float...

Jag förstår nog inte vad det är du försöker åstadkomma?

 

[Spider84]

Sv: När man använder float...

Den kodningen med bilden och texten är återkommande på sidan.

Alltså:

Bild Text

Bild Text

Bild Text


När jag bara lägger upp en sådan länga så går det bra, men när jag försöker lägga upp en till under hamnar de så här:

Bild Text Bild Text


Jag kanske har krångligt till det för mig själv?

 

[moiran]

Sv: När man använder float...

Så här: http://www.etek.chalmers.se/~mia/temporary/temp.html?

Går också att lösa genom att göra en div mellan första och andra bild-textparet som är 100% bred och inget hög med clear:left på...

eller så gör man naturligtvis en kontainer som omsluter samtliga bild-textpar och som är så stor/liten att nästa bild-textpar tvunget måste lägga sig på ny rad.

man får avgöra vilket som passar bäst.

 

[Spider84]

Sv: När man använder float...

Precis så som på bilden.

Okej, men det verkar lite "fel" att lägga in en extra div mellan. Men det kanske är enklaste lösningen?

 

[moiran]

Sv: När man använder float...

Tja, någon av de tre sätt jag angav är väl de lättaste sätten i alla fall. Mittenvarianten är väl mest fulknep men de andra två är korrekta.

 

[Spider84]

Sv: När man använder float...

Ska testa den varianten med alla lägga en div mellan med 100%.

Den ful varianten har jag faktiskt testat.
Men det gick inge bra. För den tryckte ut textrutan för mycket på nåt konstigt sätt.

 

[moiran]

Sv: När man använder float...

Det är alltså den tomma diven som är fulknepet.

 

[Spider84]

Sv: När man använder float...

Jo jag förstod det. Skrev fel bara.
Har inte testat den.

Nu funkade det iaf. Var en class inom img som störde det hela. Tog bort den och kodade om css'n så fungerade allt fin fint.

Tack för hjälpen.