---
title: "Problem att positionera DIV-boxar med CSS!"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/157143-problem-att-positionera-div-boxar-med-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Reisan"
published: "2007-02-13T19:41:45.000Z"
updated: "2007-02-16T08:05:55.000Z"
replies: 4
views: 468
page: 1
pages: 1
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/157143-problem-att-positionera-div-boxar-med-css"
---

# Problem att positionera DIV-boxar med CSS!

## #1 — Reisan, 2007-02-13T19:41Z

Jag har centrerat boxar efter varann, sidhuvud, kategorimeny, innehåll och sidfot. De har en bredd på 700px. Och inne i innehållsboxen så har jag tre DIV-boxar som jag kallat inner_left, inner_center och inner_right. De har måtten 150px 400px 150px. Och de ska vara bredvid varann i den ordningen inom innehållsboxen. Men får ej rätt på CSS:en. Tacksam för hjälp! Tipsa gärna om förbättringar i det jag gjort. Bifogar html-kod och css-koden.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Visituz.com - En hemsida f&ouml;r vanliga anv&auml;ndare, av vanliga anv&auml;ndare!</title>
<link href="css/styluz.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="logotype"></div>
<div id="toolbar"></div>
<div id="content">
<div id="inner_left_content"></div>
<div id="inner_center_content"></div>
<div id="inner_right_content"></div>
</div>
<div id="footer">Visituz.com Copyright &copy; 2007 - All rights reserved </div>
</body>
</html>
```

```

#logotype {
	background-image: url(../img/vinjett.gif);
	background-repeat: no-repeat;
	height: 189px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
}
#toolbar {
	background-image: url(../img/toolbar.gif);
	background-repeat: no-repeat;
	vertical-align: middle;
	height: 20px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
}
#content {
	height: 100%;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
}
#footer {
	background-image: url(../img/toolbar.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 700px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #808080;
	border-bottom-color: #808080;
	border-left-color: #808080;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	color: #000000;
}
body {
	margin: 0px;
	height: 100%;
	background-image: url(../img/bg_streck.gif);
}
#inner_left_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	color: #000000;
	background-color: #f1f1f1;
	padding: 5px;
	float: left;
	height: 100%;
	width: 140px;
}
#inner_center_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	color: #000000;
	background-color: f9f9f9;
	vertical-align: top;
	padding: 5px;
	float: left;
	height: 100%;
	width: 390px;
}
#inner_right_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
	background-color: f1f1f1;
	vertical-align: top;
	height: 100%;
	width: 140px;
	float: left;
}
```

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

## #2 — zcorpan, 2007-02-14T21:28Z

```
html { font-size:81.25%; font-family:Verdana, sans-serif; background:white url(../img/bg_streck.gif); color:black; }
 body { width:700px; margin:0 auto; border:1px solid #808080; border-top:none;	}
  #logotype { background:url(../img/vinjett.gif) no-repeat; height:189px; border-bottom:1px solid #808080; }
  #toolbar { background:url(../img/toolbar.gif) no-repeat; height:20px; border-bottom:1px solid #808080; }
  #content { background-color:#f9f9f9; border-left:140px solid #f1f1f1; border-right:140px solid #f1f1f1; zoom:1; /* ie */ }
   #inner_left_content { padding:5px; float:left; display:inline; width:140px; margin-left:-145px; }
   #inner_center_content { padding:5px; float:left; width:390px; }
   #inner_right_content { padding:5px; width:140px; float:right; display:inline; margin-right:-145px; }
   #content::after { content:""; display:block; clear:both; }
  #footer { background:url(../img/toolbar.gif) no-repeat; height:20px; font-size:69.23%; clear:both; border-top:1px solid #808080; }
```

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

## #3 — Reisan, 2007-02-15T10:46Z

SuperMegaTack!

> **zcorpan skrev:**
>
> ```
> html { font-size:81.25%; font-family:Verdana, sans-serif; background:white url(../img/bg_streck.gif); color:black; }
>  body { width:700px; margin:0 auto; border:1px solid #808080; border-top:none;	}
>   #logotype { background:url(../img/vinjett.gif) no-repeat; height:189px; border-bottom:1px solid #808080; }
>   #toolbar { background:url(../img/toolbar.gif) no-repeat; height:20px; border-bottom:1px solid #808080; }
>   #content { background-color:#f9f9f9; border-left:140px solid #f1f1f1; border-right:140px solid #f1f1f1; zoom:1; /* ie */ }
>    #inner_left_content { padding:5px; float:left; display:inline; width:140px; margin-left:-145px; }
>    #inner_center_content { padding:5px; float:left; width:390px; }
>    #inner_right_content { padding:5px; width:140px; float:right; display:inline; margin-right:-145px; }
>    #content::after { content:""; display:block; clear:both; }
>   #footer { background:url(../img/toolbar.gif) no-repeat; height:20px; font-size:69.23%; clear:both; border-top:1px solid #808080; }
> ```

Wow, du har fått det att se ut exakt som jag vill ha det och önskade mig! Attan vad glad jag är! Tack så hemskt mycket för hjälpen. Jag ska studera koden och ta lärdom! :D Du är verkligen duktig och är väldigt flitig på forumet. Keep the good work up!

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

## #4 — zcorpan, 2007-02-15T15:51Z

Om det är nånting du undrar över hur det fungerar så är det bara fråga. :) Allt är inte helt självförsörjande i den där koden; jag kunde ha varit flitigare i att kommentera saker och ting...

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

## #5 — Reisan, 2007-02-16T08:05Z

> **zcorpan skrev:**
>
> Om det är nånting du undrar över hur det fungerar så är det bara fråga. :) Allt är inte helt självförsörjande i den där koden; jag kunde ha varit flitigare i att kommentera saker och ting...

Ja, där var en del saker i koden som inte var så självklart. Men jag frågar om jag inte förstår delar i koden. :D

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/157143-problem-att-positionera-div-boxar-med-css
