Foto's strak naast elkaar plaatsen

[haso]

beste leden,

Ik heb de volgende vraag. Ik probeer boven aan mijn pagina links een foto toe te voegen en midden eentje en rechts eentje maar ze moeten wel strak naast elkaar geplaatst worden. Het lukt niet helemaal met de div rechts die foto komt steeds niet strak naast de foto van div midden aan de rechter kan van de pagina te staan. Ik hoop dat jullie een tip (oplossing) hebben voor mij. Hieronder mijn code. Er mag alleen van div gebruik gemaakt worden.

<div id="links"><img src="logo.jpg" alt="Northampton Zoo Logo"></div>
<div id="midden"><img src="ad2.gif" alt="main ad"></div>
<div id="rechts"><img src="miniad.jpg" alt="mini ad"></div>

#links {
	padding:0px;
	height: 100px;
	width: 120px;
	position: relative;
	top: 10px;
}
#midden {
	position: absolute;
	top: 10px;
	right: 1000px;
}
#rechts{
	width: 160px;
	position: relative;
	top: 10px;
	margin-left: 1740px;

Met vriendelijke groet,

Haso

 

[grumbkow]

Heb je een online voorbeeld voor ons, is wat makkelijker kijken en testen

 

[quintoo]

CSS

#links {
padding:0px;
height: 100px;
width: 120px;
margin-top:10px;
float:left;
}
#midden {
position: absolute;
margin-top: 10px;
float:left;
}
#rechts{
width: 160px;
position: relative;
margin-top: 10px;
float:left;
}

<div id="links"><img src="logo.jpg" alt="Northampton Zoo Logo"></div>
<div id="midden"><img src="ad2.gif" alt="main ad"></div>
<div id="rechts"><img src="miniad.jpg" alt="mini ad"></div>
<div style="clear:both"></div>

Ik neem dan nu aan dat je gewoon je afbeelding vlak naast elkaar wilt hebben.

 

[bron]

Voorbeeld met bovenste rij 3 fotos en onderste rij 2 fotos.
Je mag fotos toevoegen en weghalen. De fotos "leunen" tegen elkaar.
De class bij een img is de breedte van de foto.

<div class="imgblok">
  <img class="w120" src="foto1-3.jpg" alt="Foto 1 van 3" />
  <img class="w120" src="foto2-3.gif" alt="Foto 2 van 3" />
  <img class="w160" src="foto3-3.jpg" alt="Foto 3 van 3" />
  <img class="w200" src="foto1-2.jpg" alt="Foto 1 van 2" />
  <img class="w200" src="foto2-2.jpg" alt="Foto 2 van 2" />
</div>

.imgblok {
  width: 400px; /* breedte foto blok */
  height: 200px; /* hoogte  foto blok */
  margin: 0;
  padding: 10px 0 0 0; /* witruimte boven de bovenste rij */
}
.imgblok img {
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
  height: 100px;
}
.imgblok .w120 { width: 120px; }
.imgblok .w160 { width: 160px; }
.imgblok .w200 { width: 200px; }

Veel suc6.