---
title: "position inom css-frames"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/185794-position-inom-css-frames"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "kylberg"
published: "2011-01-18T14:20:55.000Z"
updated: "2011-01-19T07:22:18.000Z"
replies: 7
views: 1754
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/185794-position-inom-css-frames"
---

# position inom css-frames

## #1 — kylberg, 2011-01-18T14:20Z

Jag har en sida med css-frames. Jag har försökt lite olika sätt att positionera divar inom divarna som utgör själva ramverket. Men det fungerar lite olika i olika browsers, och ibland måste man krångla till det en hel del för att det ska fungera. Dessutom använder jag ett CMS system vilket gör det ännu krångligare att bygga en hållbar grund som inte skadas av för mycket ändringar av min kund. 

Ta en titt på koden nedan och titta på <http://tandlakarna.ax> för att se en tidigare sajt jag byggt med samma grundstruktur. Vilket sätt är bäst för att positionera divar med varierande mängd innehåll utan att strukturen spricker när det görs ändringar? Vilket position-värde bör jag använda i css:en?

skulle vara tacksam för några idéer!
html:

```
<body>
<div id="headerwrap">
    <div id="header">

    </div>
</div>

<div id="middlewrap">
    <div id="middle">

    </div>
</div>

<div id="footerwrap">
    <div id="footer">

    </div>
</div>
</body>
```

css:

```
div#headerwrap {
	position:absolute;
	width:100%;
	top:0;
	left:0;
	height:303px;
}
div#header {
	height:303px;
	width:800px;
	margin:0 auto;
}

div#middlewrap {
	padding:303px 0 0 0;
	margin-left:0;
	voice-family: "\"}\""; 
	voice-family:inherit;
	margin-left:16px;
	padding-bottom:50px;
}
body>div#middlewrap {
	margin-left:0;
}
div#middle {
	width:800px;
	margin:0 auto;
}

div#footerwrap {
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	height:60px;
}
body>div#footerwrap {
	position:fixed;
	background-image:url(Images/bg.jpg);
	background-position:center;
	background-repeat:repeat-y;
}
div#footer {
	height:60px;
	width:800px;
	margin:0 auto;
	padding:10px;
	text-align:center;
}
```

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

## #2 — aron, 2011-01-18T14:54Z

1\. Använd inte ordet frames om du inte menar HTML-frames.

2\. Du behöver en CSS kurs, men kolla på <http://htmldog.com/reference/cssproperties/position/>

Jag brukar undvika absolute och fixed eftersom dom inte följer flödet.

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

## #3 — bossse, 2011-01-18T15:17Z

På <http://tandlakarna.ax> kan man läsa följande:
Vi har öppet alla vardagar under helgerna. 
Klurigt värre! :OO

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

## #4 — Danne V, 2011-01-18T15:39Z

Som Aron skriver: använd inte ordet "frames". Det är inte css. Kalla det "divvar" eller "containers". Då förstår man vad du menar.

Som Aron också skriver: undvik att positionera divvarna så långt det går. Det ställer ofta till trassel om man inte riktigt fått kläm på css. 

Jag tycker att du krånglat till en väldigt enkel struktur. Föreslår att du helt enkelt börjar så här:

```
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
```

```
#wrapper {
width:800px;
margin:0 auto;
}
```

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

## #5 — voigtann1, 2011-01-18T16:24Z

sen bör du undvika \> i CSS selectorer, det är skit bra att ha, men dåligt stöd i webbläsare, och eftersom du jobbar mot id:n direkt så kör på det istället för att försöka skriva exakt var dom är. IDn är unika.

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

## #6 — aron, 2011-01-18T16:48Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1527505)**
>
> sen bör du undvika \> i CSS selectorer, det är skit bra att ha, men dåligt stöd i webbläsare, och eftersom du jobbar mot id:n direkt så kör på det istället för att försöka skriva exakt var dom är. IDn är unika.

Exakt ersätt t.ex.

```
body>div#middlewrap {
	margin-left:0;
}
```

med:

```
#middlewrap {
	margin-left:0;
}
```

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

## #7 — Danne V, 2011-01-18T19:04Z

Och när vi ändå är igång ;)
Kolla valideringen på tandlakarna.ax :
<http://validator.w3.org/check?uri=http%3A%2F%2Ftandlakarna.ax%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&verbose=1&st=1&user-agent=W3C_Validator%2F1.1>
Skrolla gärna ner till den fixade källkoden som Tidy HTML skapat med din kod som utgångspunkt och testa om den funkar i praktiken.

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

## #8 — jawbreaker, 2011-01-19T07:22Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1527505)**
>
> sen bör du undvika \> i CSS selectorer, det är skit bra att ha, men dåligt stöd i webbläsare

Det är väl bara IE6 som har problem med detta av de webbläsare som används nuförtiden? Om man nu tycker att IE6 är en webbläsare att ta hänsyn till :)

Men visst, jag håller med dig om att man inte ska trixa med css:en i onödan och istället använda id:n etc när det går.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/185794-position-inom-css-frames
