HTML Div som inte sträcker ut

Okej som ni ser på bilden här under så är det något fel med min header div. När jag förminskar fönstret så hänger den inte med och sträcker ut sig, trots att width är satt till 100%. Samma sak med menyn vill att själva bakgrunden ska fortsätta sträcka sig åt sidan trots att man minskar fönstret.

http://sv.tinypic.com/view.php?pic=1zqu3k6&s=8

(är även bild på koden)

Kan kopiera in den här:

<div id="head">
				<img src="black2.jpg" id="logo" >
			
			
				<div id="mainmenu">
					
					<ul>
						<li><a href="#">Om oss</a></li>
						<li><a href="#">Öppettider</a></li>
						<li><a href="#">Hitta hit</a></li>
						<li><a href="#">Kontakta oss</a></li>		
					</ul>
				</div>
			</div>

#head
{
background-color:black;
min-width:100%;
min-height:150px;
display:inline-block;
margin: -5px -6px -5px -6px;
padding: 15px;
border:0px solid black;

}

#mainmenu
{
background-color:black;
width:480px;
font-size:1.1em;
font-weight:bold;
text-align:left;
border-radius:1px;
margin:40px auto;
position:absolute;
top:100px;
left:20%;


}

Väldigt lustigt måste vara något annat i min kod isåfall.

Här är hela min CSS:

body
{
background-color:#222222;
}

/*#page
{
width:60%;
margin:0px auto;
border-radius:10px;
border:1px solid black;
background-color:grey;
}*/
#head
{
background-color:black;
min-width:100%;
min-height:150px;
display:inline-block;
margin: -5px -6px -5px -6px;
padding: 15px;
border:0px solid black;

}

#foot
{
width:60%;
background-color:black;
min-height:100px;
text-align:center;
clear:both;
margin: -20px auto;


}

#content
{
	width:60%;
	background-color:white;
	margin:0  auto;
	min-height:1000px;
	
}

#logo
{
position:absolute;
left:20%;
top:2%;
}


h1
{
color:white; 
margin-top:0px;
position:absolute;
left:20%;
top:10%;
}
.copy{
color:white;
}




/*----------------------------------------------------*/

#mainmenu
{
background-color:black;
width:480px;
font-size:1.1em;
font-weight:bold;
text-align:left;
border-radius:1px;
margin:40px auto;
position:absolute;
top:100px;
left:20%;


}

#mainmenu ul
{
height:auto;
padding:0;
margin:0;
list-style-type:none;

}

#mainmenu li
{
display:inline;
}

#mainmenu a
{
text-decoration:none;
color:white;
padding:0px 5px 0px 5px;
font-family:verdana;

}

#mainmenu a:hover
{

color:#DF0023;
}

Ja men jag använder inte #page, har kommenterat ut den.

Efter att ha studerat det närmare så tror jag det är menyn som stället till det.

Minskar jag fönstret så minskas ju diven men menyn sticker utanför och gör så att man kan scrolla fönstret. Jag vill ju att man ska kunna scrolla men inte att diven bryts av för det.

Hmm jag är ganska ny på detta och rör ihop positioneringen lite men såhär har jag fattat det:

Static(elementet lgger där det ska, behövs egentligen inte deklareras)
relative(elementet läggs där det ska ligga men kan sedan positioneras ifrån denna position med värden)
absolute(elementet läggs utanpå dess naturliga position och läggs på platsen i vänstra hörnet från föregående absoluta elementet om inget finns sätts den i det vänstra översta hörnet i webbläsare.
Fixed funkar som absolute bara att den ignorerar parent elements och sätts i hörnet direkt.

Men jag har fortfarande inte använt page. fick tipset om att göra så på w3shools forumet...

SÄtter jag både headern och menyn till relative så flyger ju bara menyn runt och går inte att positionera, oavsett om jag använder pixlar eller % för att positionera den.

Här https://copy.com/SHq3VOn0QN9fJSDi

Nej det vet jag, men inget läggs ju där det ska annars känns det som. Sedan flyttar sig vissa grejer och vissa inte. Jag har ju page som containar i princip hela sidan, om jag sätter den till ex till 60% och sedan header till 100% så går ju bara headern 100 i dem 60, dvs den tar också bara upp 60% av sidan jag kan ju inte lägga den utanför page för då förstörs inkapsulationen. Försökt positinera det rätt i flera timmar, fattar hur det funkar när jag läser om det men känns som att inget funkar i praktiken.

Ja detta förstår jag. Men alltså, jag vill att min header (med menyn, logga och allt) inte ska ändra storlek, bara min content div ska bli mindre eller alternativt också vara fast.

När jag minskar fönstret så sträcker ju min meny ut sig, precis så som du säger och visar, men sätter jag den till en % så resizar ju själva menyn sig också, menyn vill jag ju ska vara helt fast. Så jag kan varken använda procent eller pixlar, hur gör jag då?

Ja det vet jag, men återigen, sätter jag det i pixlar så trycker den ut sidan när jag minimerar sidan. Och dessutom så hänger det ju inte med content som jag vill ska scrolla.

Tänk ja pröva Sweclockers, content delen trycks ihop till en viss del medans menyn är fast. Min meny är ju nästan fast men den sticker ju fortfarande ut som i mitt op inlägg. Och som Teknocide skrev är det ju pixlarnas fel, men kan inte använda % heller.

Har ju fortfarande page som wrappar allt men såfort jag lagt på den blir det 20x värre. Speciellt eftersom header då inte går att få ut till skärmkanterna eftersom page hindrar den, som jag skrev innan. Visst jag kan väl låta page vara oformaterad och positionera saker utifrån den men vet inte vad det skulle vara bra till..

Codepen:

http://codepen.io/anon/pen/IrnoK/

2 Grejer:

1. Förminska fönstret och scrolla i sidled, menyn sticker ut för att den är satt i pixlar. Hur löser jag det?

2. Menyn samt bilden(syns dock inte) ska ligga och följa med min content men gör inte det när man scrollar i sidled.

Nej inte direkt, men jag vill inte att den blir helt konstig ifall man använder mindre fönster. Att ta bort widthen på menyn hjälper, men då kommer problemet att den trycker ihop sig, för min del får den gärna fortsätta vara rak.

Jamen om jag har en bredd på den så är menyn kvar ja, men inte själva bakgrunden till headern, precis som här: http://sv.tinypic.com/view.php?pic=1zqu3k6&s=8

Är 960px+ såpass vanligt idag?

Hmm prövade att ta bort paddingen och widthen på menyn så försvinner det men har jag fortfarande en width så har jag problemet kvar.

Hmm får sova på saken. Angående fråga två: Vet inte om jag är blind men rör sig inte menyn och loggan när man resizar?

Nej alltså inte i fullscren men om man minskar fönsret och scrollar i sidled är det jag menar: http://sv.tinypic.com/view.php?pic=24b0qvn&s=8

Eller är det bara till att skita i? Är ju aldrig någon som kommer göra så ändå men men, tänkte göra en mobilversion med så när fönsret är tja 500px brett eller något så läggs en annan css på så menyn hamnar i toppen istället.

En snabbfråga: Håller på med att styla en meny för en mobil sida, är det vanlig att man använder en annan html fil då som man omdirigeras till?
Har kollat på denna tex: http://blog.teamtreehouse.com/create-an-absolute-basic-mobile... men där behöver jag ju en till html fil bara för mobil.

Kan man på nåt sätt göra så att när man förminskar webbläsar fönsret skickas till den mobila direkt, eller ska man ha dem separerade?..