Flexible Grid Layout Divisions Overflow Problem

[Narph]

Hallo,

ich habe mein Problem auch schon hier gepostet: http://www.traum-projekt.com/forum/...-flexible-grid-layout-divisions-overflow.html

Dort ist es etwas besser lesbar, da die Bilder in den Textfluss eingeblendet sind.

Hier mein Layout als Bild mit zugehörigem css

Mein Problem ist der horizontale overflow von der Navigation in den Contentbereich Bereich und vom Content in die rechte Navigation. Auf dem bild rot markiert.

Dies ist der HTML Code:

{config_load file="$language/lang_$language.conf" section="index"}

<div id="wrapper">

<div id="headerArea">
<div id="logo">
<a href="index.php" ><img width="200px" src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" /></a>
</div>
</div>

<div id="leftPanel">
{$box_CATEGORIES}
</div>

<div id="contentPanel">

<div id="navtrail">{$navtrail}</div>
{$main_content}
</div>

<div id="rightPanel">

</div>

</div>

Hier der css code nochmal als text

html, body {
width:100%;
height: 100%;
}

#wrapper {
height:100%;
position: relative;
min-width:760px;
}

#headerArea {
width:100%;
}

#leftPanel {
width:15%;
float: left;
}

#contentPanel {
width:70%;
height:70%;
float: left;
}

#rightPanel {
width:15%;
height:70%;
float: left;
}

Weiss jemand, wie ich das lösen könnte?
Über Antworten würde ich mich freuen,

Vielen Dank im Voraus

Narph

 

[Maik]

Hi,

entweder erhöhst du die linke Spaltenbreite, damit die lange Zeichenfolge darin auch den benötigten Platz vorfindet, und sich nicht über die Elementgrenzen hinweg in das benachbarte Element erstreckt, oder du stockst die Mindestbreite des #wrapper-DIVs auf, damit das Element beim Verkleinern des horizontalen Viewports nicht so weit zusammengestaucht wird, oder du wendest gleich besser beide Vorschläge auf das Layoutkonzept an.

 

[Narph]

Hi,

entweder erhöhst du die linke Spaltenbreite, damit die lange Zeichenfolge darin auch den benötigten Platz vorfindet, und sich nicht über die Elementgrenzen hinweg in das benachbarte Element erstreckt, oder du stockst die Mindestbreite des #wrapper-DIVs auf, damit das Element beim Verkleinern des horizontalen Viewports nicht so weit zusammengestaucht wird, oder du wendest gleich besser beide Vorschläge auf das Layoutkonzept an.

Das Problem ist, die Navigation wird dynamisch aus einer DB geladen. Da sind ca 7500 verschiedene Namen drin. Manche Namen sind noch länger als das. Die breite der Spalte zu verändern, ist also für mich keine Lösung.

Zur Mindestbreite, sollte es für die Leute mit den 800 x 600 Auflösungen nicht 760 px sein?

Am schönsten wäre es, wenn sich das leftpanel div am inhalt orientiert und vergrößert und gleichzeitig das contentpanel sich an das veränderte div dran hängt.

Kann man das irgendwie erreichen?