---
title: "menyn hamnar inte rätt"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/125323-menyn-hamnar-inte-rätt"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Pumba"
published: "2005-03-29T09:54:07.000Z"
updated: "2005-04-02T18:14:21.000Z"
replies: 9
views: 365
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/125323-menyn-hamnar-inte-rätt"
---

# menyn hamnar inte rätt

## #1 — Pumba, 2005-03-29T09:54Z

jag försöker få menu2 att hamna till höger om main, det fungerar i IE men i firefox så bara smetar den ihop sig i mitten, nån som vet vad jag gör för fel?

\<style type="text/css"\>
html, body { /\*\*/
color: #fff;
background-color:#ffffff;
margin:0;
padding:0; 
height:100%; /\*\*/
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/storbg.jpg'); BACKGROUND-REPEAT: repeat-y
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin:0;
padding: 2px 5px 2px 5px;
}
A
{
	color: #000000;
	text-decoration: underline;

}
A:hover
{
	color: #FFFFFF;
	text-decoration:underline;
}

\#container {
width:740px;
min-height:100%; /\*\*/
background-color:#FFFFFF; 
}

\#header{
width: 740px;
height: 92px;
background-color:#333;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/logo2.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0
}

\#menu {
width:740px;
height: 29px;
background-color:#AC883F;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0;
}

\#main {
width:515px;
height : 24px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/information.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
\#maininfo {
width:515px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbg.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
\#mainend {
width:515px;
height : 7px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbgend.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
\#menu2 {
width:174px;
height: 24px;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n
float: right;
margin:0;
}
\#belowthebottom {
  height:28px;  
}
\#bottom{
width:740px;
height: 22px; 
background-color:#999;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin-top:-28px; /\* samma som height \*/

}

\</style\>

\<!--\[if IE\]\>
\<style type="text/css"\>
\#container {height:100%}
\</style\>
\<!\[endif\]--\>

\</head\>

\<body\>
\<div id="container"\>

\<div id="header"\>\<p\>\</p\>\</div\>
\<div id="menu"\>\<p\>&nbsp;\</p\>\</div\>
\<div id="main"\>\<p\>Välkommen\</p\>\</div\>
\<div id="menu2"\>\<p\>Meny2\</p\>\</div\>
\<div id="maininfo"\>\<p\>Välkommen hit!=)\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\<p\>&nbsp;\</p\>\</div\>
\<div id="mainend"\>\<p\>\</p\>\</div\>

\<div id="belowthebottom"\>\</div\>

\</div\>

\<div id="bottom"\>\<p\>&nbsp;\</p\>\</div\>

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

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

## #2 — Flashes, 2005-03-29T10:48Z

Det beror på hur du menar till höger om.
Som det är nu har du klämt in menu som är 740px bred och menu2 som är 174 px bred i en container som är 740 px bred.
Jag förstår inte hur menu2 ska kunna få plats till höger om menu.
Om du flyttar om så här så hamnar menu2 till höger, men hur långt beror på upplösning. Vill du styra hur den hamnar får du antingen göra container bredare eller lägga till en back container som håller manu2 inom rimliga gränser till höger om #container

```
<div id="menu2"><p>Meny2</p></div>
<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>meny1</p></div>
<div id="main"><p>Välkommen</p></div>
<div id="maininfo"><p> </p><p>main info</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
<div id="mainend"><p>main end</p></div>
</div>
<div id="belowthebottom"></div>
<p>below the bottom</p>
<div id="bottom"><p>bottom</p></div>
```

Och #belowthebottom behöver justeras

```
#belowthebottom {
clear: both;
height: 28px;
}
```

Mvh
Jan-Olov

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

## #3 — Pumba, 2005-03-29T23:00Z

det där fungerade verkligen inte, nu hamnar ju Meny2 helt fel, bifogar en bild för att visa hur jag vill att det ska va

Bilagor:

- [menu2.jpg](https://www.webforum.nu/a/5942.jpg)

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

## #4 — Flashes, 2005-03-30T08:02Z

Aha, ja det var skillnad det :)
men som jag förstod dig så var min lösning korrekt.
prova det här då, då ska åtminstånde main och meny2 ligga rätt.
Kollade inte om bottom och dom ligger på samma ställe i både IE och FF

```
<HTML>
<HEAD>
<style type="text/css">
html, body { /**/
color: #fff;
background-color:#ffffff;
margin:0;
padding:0;
height:100%; /**/
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/storbg.jpg'); BACKGROUND-REPEAT: repeat-y
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin:0;
padding: 2px 5px 2px 5px;
}
A
{
color: #000000;
text-decoration: underline;

}
A:hover
{
color: #FFFFFF;
text-decoration:underline;
}

#back {
width: 920px;
min-height:1 00%; /**/
background-color: #FF00FF;
}

#container {
width:740px;
min-height:100%; /**/
background-color:#FFFFFF;
}

#header{
width: 740px;
height: 92px;
background-color:#333;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/logo2.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0
}

#menu {
width:740px;
height: 29px;
background-color:#AC883F;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0;
}

#main {
width:515px;
height : 24px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/information.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}

#menu2 {
clear: both;
width: 174px;
height: 24px;
float: right;
margin: -24px 0 0 0;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n
}

#maininfo {
width:515px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbg.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#mainend {
width:515px;
height : 7px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbgend.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}

#belowthebottom {
clear: both;
height: 28px;
}
#bottom{
width: 740px;
height: 22px;
background-color:#999;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin-top:-28px; /* samma som height */

}

</style>

<!--[if IE]>
<style type="text/css">
#container {height:100%}
#menu2 {margin:0px}
</style>
<![endif]-->

</head>

<body>
<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>meny1</p></div>
<div id="main"><p>Välkommen</p></div>
<div id="menu2"><p>Meny2</p></div>
<div id="maininfo"><p> </p><p>main info</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
<div id="mainend"><p>main end</p></div>
</div>
<div id="belowthebottom"></div>
<p>below the bottom</p>
<div id="bottom"><p>bottom</p></div>
</body>
</html>
```

Mvh
Jan-Olov

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

## #5 — Pumba, 2005-04-02T10:35Z

det där fungerade inte heller =/

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

## #6 — Pumba, 2005-04-02T10:38Z

kan nån säga varför detta fungerar i IE och inte i firefox? det är Meny2 som hamnar galet i firefox

\<!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\>Box\</title\>
\<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /\>
\<style type="text/css"\>
html, body { /\*\*/
color: #fff;
background-color:#ffffff;
margin:0;
padding:0; 
height:100%; /\*\*/
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/storbg.jpg'); BACKGROUND-REPEAT: repeat-y
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin:0;
padding: 2px 5px 2px 5px;
}
A
{
color: #000000;
text-decoration: underline;

}
A:hover
{
color: #FFFFFF;
text-decoration:underline;
}

\#container {
width:740px;
min-height:100%; /\*\*/
background-color:#FFFFFF; 
}

\#header{
width: 740px;
height: 92px;
background-color:#333;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/logo2.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0
}

\#menu {
width:740px;
height: 29px;
background-color:#AC883F;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0;
}

\#main {
width:515px;
height : 24px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/information.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
\#maininfo {
width:515px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbg.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
\#mainend {
width:515px;
height : 7px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbgend.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
\#menu2 {
width:174px;
height: 24px;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n
float: right;
margin:0;
}
\#belowthebottom {
height:28px; 
}
\#bottom{
width:740px;
height: 22px; 
background-color:#999;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin-top:-28px; /\* samma som height \*/

}

\</style\>

\<!--\[if IE\]\>
\<style type="text/css"\>
\#container {height:100%}
\</style\>
\<!\[endif\]--\>

\</head\>

\<body\>
\<div id="container"\>

\<div id="header"\>\<p\>\</p\>\</div\>
\<div id="menu"\>\<p\> \</p\>\</div\>
\<div id="main"\>\<p\>Välkommen\</p\>\</div\>
\<div id="menu2"\>\<p\>Meny2\</p\>\</div\>
\<div id="maininfo"\>\<p\>Välkommen hit!=)\</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\<p\> \</p\>\</div\>
\<div id="mainend"\>\<p\>\</p\>\</div\>

\<div id="belowthebottom"\>\</div\>

\</div\>

\<div id="bottom"\>\<p\> \</p\>\</div\>

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

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

## #7 — Pumba, 2005-04-02T14:53Z

ingen som har en aning om vad det är som strular?

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

## #8 — jarvklo, 2005-04-02T16:45Z

Hmm...

FireFox ignorerar allt bortom ett utelämnat semikolon inom en och samma stildeklaration ;) 

```
#menu2 {
width:174px;
height: 24px;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n    [b]/* saknas semikolon */[/b]
float: right;
margin:0;
}
```

... du har det på flera ställen ;)

Ledsen att behöva säga det eftersom det är en standardpekpinne, men tag gärna som vana att validera din CSS-kod med jämna mellanrum (man slipper ofta skjuta sig i foten pga skriv- och slarvfel om man tar hjälp av automatgranskande verktyg ;) )

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

## #9 — m_soderlund, 2005-04-02T17:01Z

[CSS-validator](http://jigsaw.w3.org/css-validator/) ;)

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

## #10 — Pumba, 2005-04-02T18:14Z

åååh vad arg jag blir, att det skulle vara så enkelt, tack så mycket för hjälpen! :)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/125323-menyn-hamnar-inte-rätt