---
title: "Bilder och div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/189748-bilder-och-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "telin"
published: "2012-05-09T18:59:32.000Z"
updated: "2012-09-14T16:52:27.000Z"
replies: 21
views: 3422
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/189748-bilder-och-div"
---

# Bilder och div

_Sida 1 av 2._

## #1 — telin, 2012-05-09T18:59Z

Jag håller på med en hemsida. Jag använder mig av notepad++ och jag har inte lagt upp sidan än.  Men när jag förhandsgranskar sidan så hamnar bilderna under varandra och inte jämte varandra som i exemplet på denna sidan:

<http://www.w3schools.com/css/css_image_gallery.asp>

Vad tror ni det är för fel? Jag har testat att ta bort float och ändrat värden. Men jag vet inte varför det inte blir rätt. Jag har mer än fyra bilder om det påverkar resultatet.

Telin

Permalänk: https://www.webforum.nu/p/189748

## #2 — voigtann1, 2012-05-09T19:00Z

Välkommen till wF

postar din kod så underlättar det än att sitta och gissa vad du har missat

Permalänk: https://www.webforum.nu/p/2298313

## #3 — telin, 2012-05-09T19:02Z

CSS koden:

```
div.img
{
	margin:			2px;	
	width:			auto;
	height:			auto;
	border:			1px solid #ffffff;
	text-align:		center;
	float:			left;
}

div.img img
{
	display:		inline;
	margin:			3px;
}

di.img a:hover img
{
	border:			1px solid #ffffff;
}

div.desc
{
	text-align:		center;
	font-weight:	normal;
	width:			120px;
	margin:			2px;
}
```

HTML:

```
<div class="img">
							<a target="_blank" href="klematis_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Drömmar</div></div>
					<div class="img">
							<a target="_blank" href="klematis2_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Finska pinnar</div></div>
					<div class="img">
							<a target="_blank" href="klematis3_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Hallongrottor</div></div>
					<div class="img">
							<a target="_blank" href="klematis4_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Schackrutor</div></div></br>
					<div class="img">
							<a target="_blank" href="klematis_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Bondkakor</div></div>
					<div class="img">
							<a target="_blank" href="klematis2_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Chokladsnittar</div></div>
					<div class="img">
							<a target="_blank" href="klematis3_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Wienerstänger</div></div>
					<div class="img">
							<a target="_blank" href="klematis4_big.htm"><img src="C:\Program\Notepad++\kafferep\images\ics.jpg" alt="Klematis" width="110" height="90" /></a><div class="desc">Kolakakor</div></div>
```

Permalänk: https://www.webforum.nu/p/2298314

## #4 — voigtann1, 2012-05-09T19:18Z

du har skrivit fel i css selektorn (di skall vara div) sen är en radbrytning \<br\> eller XHTML \<br/\> inte \</br\> (sen räcker det inte bara med en radbrytning eftersom du floatar dina element)

vilken doctype kör du? om du kör en doctype (använd html5) <http://jsfiddle.net/voigtan/TqV8a/>

Permalänk: https://www.webforum.nu/p/2298316

## #5 — nitro2k01, 2012-05-09T19:18Z

Troligen får du inte koden att köras alls. Exempelvis kan du ha glömt attributet type="text/css" om du använder en style-tagg för att definiera stilmallen.

```
<style> <- fel
<style type="text/css"> <- rätt
```

Permalänk: https://www.webforum.nu/p/2298317

## #6 — voigtann1, 2012-05-09T19:24Z

> **[nitro2k01 skrev:](https://www.webforum.nu/p/1550517)**
>
> Troligen får du inte koden att köras alls. Exempelvis kan du ha glömt attributet type="text/css" om du använder en style-tagg för att definiera stilmallen.
>
>
> ```
> <style> <- fel
> <style type="text/css"> <- rätt
> ```

vad jag vet så är det inte ett krav (även om man borde göra det) <http://voigt.se/sandbox/wf/style.html> ser ut att fungera (inte testat i opera)

Permalänk: https://www.webforum.nu/p/2298319

## #7 — telin, 2012-05-09T19:37Z

Jag använder doctype html5. Har ändrat det som var fel, bilderna visas fortfarande lodrätt och inte vågrätt. \<style type\> har jag haft rätt från början. Bilderna visas men som sagt under varandra och inte jämte.

Permalänk: https://www.webforum.nu/p/2298321

## #8 — voigtann1, 2012-05-09T19:40Z

Hur breda är dina bilder? Hur ser hela dokumentet ut? Är CSS koden i en fil?

Permalänk: https://www.webforum.nu/p/2298323

## #9 — telin, 2012-05-10T13:15Z

Jag har använt samma bild på alla bara för att testa. Den är 539x541 px, 68 kb. CSS är i en separat fil. Infogar allt nedan:

CSS:
\* { margin: 0; padding: 0; }

header, footer, container
{
	display:			block;
}

html
{
	background: 		url(Backgroundblau.png);
	background-repeat:	repeat;
}

\#container
{
	margin: 			auto;
	padding-bottom: 	1em;
	width: 				850px;
	font-family: 		Calibri, Arial, sans-serif;
	background: 		white;
	box-shadow:			0 0 25px #333;
	\-moz-box-shadow:	0 0 25px #333;
	border-left:		1px solid grey;
	border-right:		1px solid grey;
}	

\#contentText
{
	margin: 			4em 4em 5em 3em;
	padding-bottom: 	1,5em;
}

\#contentText\>h1
{
		font-weight: 	bold;
		font-size:		1,5em;
		color:			orange;
}

\#contentText\>h2
{
		font-weight:	bold;
		font-size:		1em;
		color:			grey;
}

\#sideBar
{
		width:			200px;
		float:			left;
		position:		left;
		height:			100%;
		padding-right:	30px;
		padding-top:	5px;
}

header.pageHeader
{
		padding-top:	30px;	
		width:			850px;
		height:			220px;
		background: 	beige;
		font-size:		2em;
}

footer.pageFooter
{
	background:			white;
	width:				850px;
	margin:				auto;
	padding:			15px 0px 15px 0px;
	font-family:		Calibri;
	font-size:			15px;
}

div.img
{
	margin:			2px;	
	width:			auto;
	height:			auto;
	border:			1px solid #ffffff;
	text-align:		center;
	float:			left;
}

div.img img
{
	display:		inline;
	margin:			3px;
}

div.img a:hover img
{
	border:			1px solid #000000;
}

div.desc
{
	text-align:		center;
	font-weight:	normal;
	width:			120px;
	margin:			2px;
}

HTML:

\<!DOCTYPE html\>
\<html\>
\<head\>
\<title\>Swedish Baking Recipes \| Kafferep.com \</title\>

\<link rel="stylesheet" type="text/css" href="test-layout.css" /\>
\<style type="text/css" /\>

\<meta http-equiv="Content-Language" content="en"/\>
\<meta name="Description" content="Swedish baking recipes. Cookies, buns, pastrys, cakes and more!"/\>
\<meta name="Keywords" content=" Swedish, recipes, buns, pastrys, cookie, cookies, cake, princesscake"/\>

\</head\>

\<body\>

\<div id="container"\>

	\<header class="pageHeader"\>
	
	\<center\>\<p\>KAFFEREP\</p\>\</center\>
	
	\</header\>
		
		\<section id="sideBar"\>
	
			\<script type="text/javascript"\>\<!--
			google_ad_client = "ca-pub-5265886524843455";
			/\* Kafferep sidebar \*/
			google_ad_slot = "1250353860";
			google_ad_width = 200;
			google_ad_height = 200;
			//--\>
			\</script\>
			\<script type="text/javascript"
			src="http://pagead2.googlesyndication.com/pagead/show_ads.js"\>
			\</script\>
	
			\<script type="text/javascript"\>\<!--
			google_ad_client = "ca-pub-5265886524843455";
			/\* Kafferep sidebar \*/
			google_ad_slot = "1250353860";
			google_ad_width = 200;
			google_ad_height = 200;
			//--\>
			\</script\>
			\<script type="text/javascript"
			src="http://pagead2.googlesyndication.com/pagead/show_ads.js"\>
			\</script\>
	
			\<script type="text/javascript"\>\<!--
			google_ad_client = "ca-pub-5265886524843455";
			/\* Kafferep sidebar \*/
			google_ad_slot = "1250353860";
			google_ad_width = 200;
			google_ad_height = 200;
			//--\>
			\</script\>
			\<script type="text/javascript"
			src="http://pagead2.googlesyndication.com/pagead/show_ads.js"\>
			\</script\>
	
		\</section\>
	
	\<section id="contentText"\>
	
				\<h1\>Recipes\</h1\>
				\<br\>
				\<h1\>Cookies\</h1\>
				\<hr\>
				\<br\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\dreams-drommar.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Drömmar" width="110" height="90" /\>\</a\>\<div class="desc"\>Drömmar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\finnishsticks-finskapinnar.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Finska pinnar" width="110" height="90" /\>\</a\>\<div class="desc"\>Finska pinnar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\raspberrycaves-hallongrottor.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Hallongrottr" width="110" height="90" /\>\</a\>\<div class="desc"\>Hallongrottor\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\chessquares-schackrutor.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Schackrutor" width="110" height="90" /\>\</a\>\<div class="desc"\>Schackrutor\</div\>\</div\>
					\<br\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\farmercookies-bondkakor.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Bondkakor" width="110" height="90" /\>\</a\>\<div class="desc"\>Bondkakor\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\chocolateslices-chokladsnittar.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Chokladsnittar" width="110" height="90" /\>\</a\>\<div class="desc"\>Chokladsnittar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\wienercanapes-wienerstanger.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Wienerstänger" width="110" height="90" /\>\</a\>\<div class="desc"\>Wienerstänger\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\caramelcookies-kolakakor.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Kolakakor" width="110" height="90" /\>\</a\>\<div class="desc"\>Kolakakor\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\cinnamonslices-kanelsnittar.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Kanelsnittar" width="110" height="90" /\>\</a\>\<div class="desc"\>Kanelsnittar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\almondcube-mandelkubb.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Mandelkubbar" width="110" height="90" /\>\</a\>\<div class="desc"\>Mandelkubbar\</div\>\</div\>
				\<br\>\<br\>
			
			\<h1\>Buns and cakes\</h1\>
				\<hr\>
				\<p\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\spongecake-sockerkaka.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Sockerkaka" width="110" height="90" /\>\</a\>\<div class="desc"\>Sockerkaka\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\sandcake-sandkaka.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Sandkaka" width="110" height="90" /\>\</a\>\<div class="desc"\>Sandkaka\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\softgingerbread-mjukpepparkaka.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Mjuk pepparkaka" width="110" height="90" /\>\</a\>\<div class="desc"\>Mjuk pepparkaka\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\tigercake-tigerkaka.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Tigerkaka" width="110" height="90" /\>\</a\>\<div class="desc"\>Tigerkaka\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\sugarbun-sockerbulle.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Sockerbullar" width="110" height="90" /\>\</a\>\<div class="desc"\>Sockerbullar\</div\>\</div\>
					\<br\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\semla-semlor.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Semlor" width="110" height="90" /\>\</a\>\<div class="desc"\>Semlor\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\ambrosiacake-ambrosiakaka.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Ambrosiakaka" width="110" height="90" /\>\</a\>\<div class="desc"\>Ambrosiakaka\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\loveyummy-karleksmums.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Kärleksmums" width="110" height="90" /\>\</a\>\<div class="desc"\>Kärleksmums\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\applecake-appelkaka.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Äppelkaka" width="110" height="90" /\>\</a\>\<div class="desc"\>Äppelkaka\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\swissroll-rulltarta.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Rulltårta" width="110" height="90" /\>\</a\>\<div class="desc"\>Rulltårta\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\cinnamonbun-kanelbulle.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Kanelbullar" width="110" height="90" /\>\</a\>\<div class="desc"\>Kanelbullar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\toscacake-toscatarta.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Toscatårta" width="110" height="90" /\>\</a\>\<div class="desc"\>Toscatårta\</div\>\</div\>
				
				\</p\>\<br\>\<br\>
				
				\<h1\>Pastry\</h1\>
				\<hr\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\mazarin-mazariner.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Mazariner" width="110" height="90" /\>\</a\>\<div class="desc"\>Mazariner\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\hoovers-dammsugare.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Dammsugare" width="110" height="90" /\>\</a\>\<div class="desc"\>Dammsugare\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\biskvi-biskvier.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Biskvier" width="110" height="90" /\>\</a\>\<div class="desc"\>Biskvier\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\arrackballs-arraksbollar.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Arraksbollar" width="110" height="90" /\>\</a\>\<div class="desc"\>Arraksbollar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\chocolateballs-chokladbollar.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Chokladbollar" width="110" height="90" /\>\</a\>\<div class="desc"\>Chokladbollar\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\vanillahearts-vaniljhjartan.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Vaniljhjärtan" width="110" height="90" /\>\</a\>\<div class="desc"\>Vaniljhjärtan\</div\>\</div\>
					\<br\>\<br\>
				
				\<h1\>Cakes\</h1\>
				\<hr\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\princesscake-prinsesstarta.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Prinsesstårta" width="110" height="90" /\>\</a\>\<div class="desc"\>Prinsesstårta\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\creamcake-graddtarta.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Gräddtårta" width="110" height="90" /\>\</a\>\<div class="desc"\>Gräddtårta\</div\>\</div\>
					\<div class="img"\>
							\<a target="\_blank" href="C:\\Program\\Notepad++\\kafferep\\recipes\\strawberrycake-jordgubbstarta.html"\>\<img src="C:\\Program\\Notepad++\\kafferep\\images\\ics.jpg" alt="Jordgubbstårta" width="110" height="90" /\>\</a\>\<div class="desc"\>Jordgubbstårta\</div\>\</div\>
	
	\</section\>

\<footer class="pageFooter"\>
	\<center\>&#169 Kafferep.com 2012 \</center\>

\</footer\>

\</div\>
\</body\>
\</html\>

Permalänk: https://www.webforum.nu/p/2298362

## #10 — voigtann1, 2012-05-11T04:21Z

\<style type="text/css" /\> är fel, ta bort den

men annars är dom på vänster sida: <http://voigt.se/sandbox/wf/telin/>

du bör nog kolla igenom din HTML struktur. undvik flera h1 att lägga in en br för en radbrytning direkt efter en rubrik känns som du lika väl kan fixa det i din CSS, samma sak med \<hr\> du kan ju ha en border-bottom på din h1(hX) för att lösa det och du få mindre HTML kod.

Sen bör du undvika att skala om bilder, varför skall man ladda ner en \~5ggr större bild än vad du presentera?

Permalänk: https://www.webforum.nu/p/2298396

## #11 — telin, 2012-08-23T19:36Z

Nu har jag fortfarande problem. Jag har lagt upp sidan men bilderna visas inte horisontellt som jag vill. Vad kan jag göra för att fixa problemet? <http://kafferep.com/recipes.html>

Permalänk: https://www.webforum.nu/p/2300573

## #12 — telin, 2012-08-23T19:37Z

Dessutom vill bilden inte visas, testat massa grejer för att få fram den men den vill inte

Permalänk: https://www.webforum.nu/p/2300574

## #13 — voigtann1, 2012-08-23T20:02Z

bilderna finns inte på <http://kafferep.com/images/ics.JPG>
var laddar du upp bilderna? 

och din CSS körs inte heller .img har ingen stil... men det skall den kanske inte heller ha, vet inte men du har inte bifogat någon mer CSS fil i den filen och ingen av de två CSS filer du ladda in har något med att göra om .img blocken

Permalänk: https://www.webforum.nu/p/2300575

## #14 — drew, 2012-08-23T20:12Z

Bilden finns på <http://kafferep.com/images/ics.jpg> men innehåller fel. FTP'ad i ASCII mode?

Permalänk: https://www.webforum.nu/p/2300576

## #15 — telin, 2012-08-26T07:37Z

vad ska jag göra för att få bilderna att visas horisontellt? jag ska pröva ladda upp bilderna igen och se om det är problemet med att de inte visas.

Permalänk: https://www.webforum.nu/p/2300615

## #16 — voigtann1, 2012-08-26T07:43Z

> **[telin skrev:](https://www.webforum.nu/p/1553695)**
>
> vad ska jag göra för att få bilderna att visas horisontellt?

Lägg in den CSS du har postat i en av dina CSS filer.

Permalänk: https://www.webforum.nu/p/2300616

## #17 — telin, 2012-08-26T20:37Z

Nu har jag en massa andra problem istället. Bilderna ligger som de ska men nu är h1 helt fel. har försökt med position, align, float.... vad ska jag göra för att få den där den ska vara?

Permalänk: https://www.webforum.nu/p/2300633

## #18 — voigtann1, 2012-08-27T04:29Z

ha en div runt alla dina \<div class="img"\> och antingen kör du en overflow: hidden på den eller kör du en så kallad clearfix för det:

<http://nicolasgallagher.com/micro-clearfix-hack/>

Permalänk: https://www.webforum.nu/p/2300637

## #19 — joser, 2012-09-02T09:13Z

> **[telin skrev:](https://www.webforum.nu/p/1553719)**
>
> Nu har jag en massa andra problem istället. Bilderna ligger som de ska men nu är h1 helt fel. har försökt med position, align, float.... vad ska jag göra för att få den där den ska vara?

Om jag fattar frågan och du inte redan har fått till det, men det ser inte ut så på din onlineversion 2012-09-02:

Minsta möjliga fix är en clear left på kategorirubrikerna, testa det. Glöm inte att byta till H2 på dem i din HTML också, H2 eftersom alla är underrubriker till H1 Recipes.

```
#contentText h2{
		font-weight: bold;
		font-size: 1em;
		color: gray; /* stavfel */
		clear: left; /* lägger h2 på ny rad */
}
.pageFooter{
	clear:left; /* placerar footer under sista float och expanderar container-diven */
}
```

Men, mer avancerat, recepten är ju listade i en lista av kategorier. En semantiskt mer korrekt lösning för t.ex. ett galleri av bilder än den du hittat på "w3schools" är oftast just en lista. Det du hittar på "w3schools" kan du se som exempel på vad css kan göra.

Så, du har en lista av listor. Säg till om vill ha hjälp att byta till listor.

Permalänk: https://www.webforum.nu/p/2304324

## #20 — telin, 2012-09-02T20:03Z

Tack för svaren. clear: left, löste mitt problem men skapade ett annat. Bilderna och rubrikerna hamnar under min sidebar. Enkel lösning?

Permalänk: https://www.webforum.nu/p/2304340

---

Tråden på webben: https://www.webforum.nu/amne/html-css/189748-bilder-och-div  
Nästa sida: https://www.webforum.nu/amne/html-css/189748-bilder-och-div/page2.md