min-width Problem

[kifferkniffer]

Hi,

ich arbeite derzeit an einem neuen Design. Das Design hat eine Breite von 100%, jedoch will ich jetzt einstellen, dass es mindestens 1000 Pixel breit sein muss, sprich wenn jmd. einen 800x600 Bildschirm hat, entsteht ein horizontaler Scrollbalken.

Hier der Code:

<style type="text/css">
#wrapper {
height:420px;
}

body {
padding:0;
margin: 0;
}

#links {
float:left;
height:408px;
width:200px;
background:green;
}

#rechts {
float:right;
height:408px;
width:200px;
background:blue;

}

#mitte {
height:401px;
margin-left:199px;
margin-right:199px;
padding:7px 3px 0;
background:black;
min-width:1000px;

}

.content {
border:1px solid #65788A;
height:381px;
width:100%;
background:red
}
</style>

<div id="wrapper">

<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="mitte">
<div class="content">
Mitte Content
</div>
</div>

</div>

Problem: Der Mittlere Container geht über den rechten Container. Eigentlich soll er den rechten Container ja weiter verschieben, und nicht über ihn gehen.

Über Hilfe würde ich mich freuen

 

[aJunkie]

Wenn es das ist, was mir letztens passiert ist, musst du der Mitte jeweils links und rechts so viel Margin geben, wie sie breit sind + 5 -10 px.
Edit: Dem Content musst du dann keine width-Angabe mehr geben. Schmeiß das raus.

 

[kifferkniffer]

Meinst du das?

#mitte {
margin-left:199px;
margin-right:199px;

 

[Space Vampire]

ich nehme an, du meinst das so.
min-width auf wrapper statt mitte.
width:100%; bei content (auf jeden fall) unnötig.

<style type="text/css">
#wrapper {
height:420px;
min-width:1000px;
}
body {
padding:0;
margin: 0;
}
#links {
float:left;
height:408px;
width:200px;
background:green;
}
#rechts {
float:right;
height:408px;
width:200px;
background:blue;
}
#mitte {
height:401px;
margin-left:199px;
margin-right:199px;
padding:7px 3px 0;
background:black;
}
.content {
border:1px solid #65788A;
height:381px;
background:red
}
</style>

<div id="wrapper">
<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="mitte">
<div class="content">
Mitte Content
</div>
</div>
</div>

 

[kifferkniffer]

Hey, danke für den Script. Also wenn ich ihn jetzt so teste, dann funktioniert er. Versuche ich ihn jedoch in meine Webseite einzubauen, funktioniert er leider nichtmehr.
Vllt. könntet ihr ja mal drüber schauen:

http://www.honfights.com/design/

Benutzer: user
PW: hondesign

Gruß,
kifferkniffer

 

[Space Vampire]

Und was genau funktioniert da gerade nicht?
Bei mir ( IE8 ) sieht das so weit ganz gut aus.
Was stört dich denn?

EDIT:
ah ich seh schon...wenn man es zu weit zusammenschiebt springen die äußeren elemente über.
mal im quellcode nachsehen ob ich was finde

 

[kifferkniffer]

Hey,
also komischerweise funktionierts bei mir im IE 7 auch, firefox will jedoch nicht. Dort schiebt sich die Mitte unter dem rechten Div durch.
Könntest dus dir ma bitte im FF anschauen?

Danke!

 

[Space Vampire]

nein im firefox sieht es bei mir genau so aus wie im IE8.
das einzige, was ich halt festgestellt habe, ist dass die äußeren elemente überspringen wenn man zu weit zusammenschiebt

 

[kifferkniffer]

So,
ich habe nun allen Divs (die es benötigen) die mindestbreite 1200px gegeben, und komischerweise funktionierts bei mir nun im IE und im FF. Möglicherweise hatte ich den Cache nicht geleert.
Funktionierts bei dir jetzt auch auf der ganzen Seite?

Vielen Dank.

 

[Space Vampire]

jup...alles prima

 

[kifferkniffer]

Vielen Dank für eure Hilfe!