Positionierung von rechts gebundenem Div

[lablala]

Hallo,
in der Überschrift konnte Ich mein Problem nicht ganz erklären:

Was ich habe ist ein rechts ausgerichtetes div.
Das ganze habe ich über float:right gemacht.
Wenn ich allerdings jetzt den Browser verkleinere bleibt das div am rechten Rand kleben, egal was ich mache.
min-width des bodys habe ich auf 800px gesetzt. Und da erscheinen auch die Scrollbalken. Allerdings bleibt das div am rechten Rand kleben, bis der Browser ca. 300 px. Groß ist.
Das div sollte aber bei ca 800 px Abstand(D.h. wenn der browser 800px groß ist) zum linken rand stehen bleiben, wenn der browser allerdings größer ist/wird rechts "kleben bleiben"

	<div id="header">		
		<img src="logo.png" width="170" height="29" id="logo">
		
		<div id="navigation">
			<div id="products">
				products
			</div>
			<div id="materials">
				materials
			</div>
			<div id="contact">
				contact
			</div>
		</div>
	</div>

body{    margin:0px;
    padding:0px;
    background-color:#ccc9ba;
    width:800px;
    min-height:300px;
    }
    
#header{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:18%;
    background-color:#4c473a;
    min-height:90px;
    max-height:200px;
    }


#logo{
    position:absolute;
    top:100%;
    margin-top:-31px;
    left:4px;
    width:170px;
    height:29px;
    }
    
#navigation{
    float: right;
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 700;
    color: white;
}

Ich hoffe man versteht das Problem einigermaßen.
Lg lablala

 

[prm]

Gib bei body min-width ein und verzichte bei #header auf die absolute Positionierung.

 

[Wustersoss]

Hallo,

erst einmal solltest du die Navigation nicht mit einer Div-Suppe lösen. Ein Div ist von Haus aus ein Blockelement genauso wie das Ul-Element für eine ungeordnete Liste. Es eignet sich daher bestens für eine Navigation und lässt sich über CSS auch direkt ansprechen.

<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>

CSS dazu mit Deinen Vorgaben und ein Rahmen in rot zur Veranschaulichung:
ul{width: 200px; float: right; border: 1px solid red;
}
@media all and (max-width: 800px) {
ul{
width: 200px; float: left; border: 1px solid red;
}

Hoffe das hilft Dir weiter.

 

[lablala]

Dank euch beiden.
Habs mit Eurer Hilfe hinbekommen.
Danke, Danke, Danke:)