---
title: "Min första div-layout"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/119144-min-första-div-layout"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "K@llen"
published: "2005-01-02T19:27:55.000Z"
updated: "2005-01-03T11:40:16.000Z"
replies: 4
views: 328
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/119144-min-första-div-layout"
---

# Min första div-layout

## #1 — K@llen, 2005-01-02T19:27Z

Nu har jag gett mig fanken på att inte använda tabeller. \*snyft\*

Men det går inte så bra. Sidan ser ut som följer:

<http://member.webforum.nu/K%40llen/sajt.pdf>

\* Headern är som den ska.
\* Topmenyn är som den ska.
\* Menyn är som den ska.

Sedan börjar strulet. Det vita där det står text, text text ska gå ända ut till högerkanten, det grå ska bort. Menyn och innehållet ska fylla ut sidan så att footern alltid hamnar längst ner även om innehållet inte räcker till.

Hur fixar jag detta?

Även andra synpunkter tas emot på koden så här långt.

index.html

```
<!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>
   <title>Testsida</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" type="text/css" href="layout.css" />
   <link rel="stylesheet" type="text/css" href="presentation.css" />
</head>
<body>
<div id="container">
   <div id="header"><h3>Header</h3></div>
   <div id="menubar"><p>Huvudsida > subsida1 > subsida2</p></div>
   <div id="bodyblock">
	<div id="leftcolumn"><h4>Menu</h4></div>
	<div id="content"><p>Text <br/>text<br/> text</p></div>
   </div>
   <div id="footer"><p>Copyright Jörgen Johnsson</p></div>
   </div>
</body>
</html>
```

 

layout.css

```
body {
 margin-top:0px;
 margin-left:0px;
 background:#FFFFFF;
 background-image: url(background.gif);
 background-repeat: repeat-y;
 color: #333333;
 text-align:left;
 padding:0;
 }

#container {
text-align:left;
 border: none;
 width:700px;
 margin:left; 
 }

#header {
 height:50px;
 background:#FFFFFF;
 color:#FFFFFF;
 }

#menubar {
 height:50px;
 background:#F2F2F2;
 border:none;	
 }

#bodyblock {
 position:relative;
 background: #DCDCDC;
 width:700px;
 padding:0;
 }

#leftcolumn {
height: 100%;
 float:left;
 background:#DCDCDC;
 color: #D7DBD3;
 width:200px;
 }

#content {
 width:500px;
 background-color:#FFFFFF;
 color: #FFFFFF;
 border:none;	
 text-align:left;
 }

#footer {
 height:25px;
 background:#F2F2F2;
 color: #FFFFFF;
border: none;
 margin:0;
 }
```

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

## #2 — zcorpan, 2005-01-02T20:51Z

Om du tar bort width för #bodyblock och #content samt lägger till clear:both; på #footer... 

Andra synpunkter:

- Använd en strict DTD.
- Undvik \<br\>
- Börja med h1 och inte med h3
- Om du ska (låstas) använda XHTML så använd inte saker som inte fungerar med XML... tex \<meta http-equiv="content-type" ... /\> har ingen som helst verkan i XML. Jag vet inte om du hade skrivit "&amp;gt;" och att forumet ändrade det till "\>", men i XML måste man använda entities (eller CDATA (som inte fungerar i HTML)) om man ska använda saker som \<, \> och &. Sålänge du använder medietypen text/html så tolkas din kod som dåligt skriven HTML av UA:n (webbläsaren).

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

## #3 — K@llen, 2005-01-02T20:57Z

> **zcorpan skrev:**
>
> Om du tar bort width för #bodyblock och #content samt lägger till clear:both; på #footer... 
> 
> Andra synpunkter:
>
> - Använd en strict DTD.
> - Undvik \<br\>
> - Börja med h1 och inte med h3
> - Om du ska (låstas) använda XHTML så använd inte saker som inte fungerar med XML... tex \<meta http-equiv="content-type" ... /\> har ingen som helst verkan i XML. Jag vet inte om du hade skrivit "&amp;gt;" och att forumet ändrade det till "\>", men i XML måste man använda entities (eller CDATA (som inte fungerar i HTML)) om man ska använda saker som \<, \> och &. Sålänge du använder medietypen text/html så tolkas din kod som dåligt skriven HTML av UA:n (webbläsaren).

Ahh tack! :D

Hur får jag "kolumnerna" för menyn och innehållet att gå ner till sidans botten då?

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

## #4 — zcorpan, 2005-01-02T21:12Z

Varför ska de göra det? Du får väl fylla på med innehåll ;)

Anyway, om du \*måste\* få sidan att gå ända ner så finns det ett antal lösningar. En av dem: <http://www.sitepoint.com/forums/showthread.php?t=143801>

Jag har släppt iden med 100% height, det finns ingen egentlig mening med det ;)

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

## #5 — K@llen, 2005-01-03T11:40Z

Mening eller inte mening är individuellt. ;) Jag löste det enligt följande:
<http://www.alistapart.com/articles/fauxcolumns>

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/119144-min-första-div-layout
