<div> wird bei "Überbreite" nach unten verschoben

  • Themenstarter Themenstarter mareje
  • Beginndatum Beginndatum
M

mareje

Hallo,

mein Seitenaufbau sieht vereinfacht folgendermaßen aus (die Vereinfachung ist an dieser Stelle ok, da sie das Problem darstellt):

format.css:

Code:
/* Allgemein Body -> Fensterbreite usw*/
body, html
{
height: 20%;
margin: 0;
padding: 0;
overflow: hidden;
}


/* Navigation oben */
#nav_top 
{
width: 100%;
background-color: #7693CB;
padding-top: 7px; 
padding-bottom: 7px;
}


/* Navigation links */
#nav_left 
{
height: 90%;
width: 120px;
background-color: #7693CB;
float: left;
padding-top: 10px;
font-size:9pt;
}


/* Hauptfenster */
#content 
{
height: 90%;
overflow: auto;
background-color: #ebebeb;
width: auto;
padding: 20px;
}

Die Seite sieht so aus:

HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/format.css" media="screen">
</head>
<body>


<!-- NAVIGATION OBEN -->
<div id="nav_top">
Obere Navigation
</div>


<!-- NAVIGATION LINKS -->
<div id="nav_left">
Linke Navigation
</div>

<!-- CONTENT -->

<div id="content">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</div>
</body>
</html>

Soweit wäre das ja ok. Wenn bei mir im "Content" jedoch eine recht breite Tabelle dargestellt werden muss, so wird der complette "Content" nach unten verschoben. Hier nachvollziehbar, indem man in einer Zeile mit den vielen "m" das Leerzeichen rausnimmt, sodass kein Zeilenumbruch stattfindet.

Frage: Wie kann ich es lösen, dass bei breitem "Content" dieser an seinem vorgesehenem Platz mit horizontalem Scrollbalken dargestellt wird.
Denn ist der "Content" höher als die Bildschirmhöhe, dann wird ja auch der vertikale Scrollbalken angezeigt.

Für eure Hilfe wäre ich sehr dankbar!

Viele Grüße
Markus
 
Moin,

wenn du für den DIV-Block #content bei überbreitem Inhalt (z.B. durch eine eingebundene Tabelle) einen horizontalen Scrollbalken in seinem Anzeigebereich erzwingen willst, hilft dir hier unser CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter.

Siehe hierzu auch analog Stu Nicholls' Layout-Beispiele, an die sich die zweite vorgestellte Technik lehnt, was den erforderlichen Workaround für den damaligen aktuellen IE6 betraf:

Denn ist der "Content" höher als die Bildschirmhöhe, dann wird ja auch der vertikale Scrollbalken angezeigt.
Diese Aussage trifft mit deinem gezeigten Code ausschließlich auf die IE-Familie (Version 6 bis 8) zu, denn in allen übrigen gängigen Browsern sieht man, unabhängig vom Inhaltsumfang in #content, von der Seite lediglich die obere Navigation #nav_top, was mit deiner height:20%-Deklaration für <body> und <html> zusammenhängt, die die restlichen 80% des vertikalen Viewports "beschneidet".

mfg Maik
 
Zurück