✔ problem div gefloatet und automatische breite. overflow visible

Status
Nicht offen für weitere Antworten.
H

hurzwurz

Grünschnabel
hi!
ich habe folgende struktur

Header
_________________________________________________

MenuI Hier steht content in einem div
I
I
I

das linke div hat ein float left
das rechte auch div in dem content steht auch
das div beinhaltet ein gridview von asp.net das automatisch generiert wird und auch mal sehr breit sein kann. wie krieg ich das div dazu
das es bei zu breiter breite nicht unterhalb sondern trotzdem noch neben dem menü angezeigt wird?
falls das content div 1200px oder mehr wird soll es immer noch so angezeigt werden

#content
{
float: left;
padding-left: 10px;
overflow: visible;
width: auto;

}
 
Hi,

besitzt das linke DIV zufällig eine Breitenangabe?

Wenn ja:

Code: 
#content
{
/*float: left;*/ /* auskommentiert = deaktiviert */
padding-left: 10px;
overflow: visible;
/*width: auto;*/ /* auskommentiert = deaktiviert */
margin-left: 200px; /* entspricht der Breite der linken Spalte */
}

mfg Maik
 
Danke Maik
für die schnelle Antwort

nein das linke div besitzt keine breite

in das linke rein sind noch paar sachen verschachtelt von ajax etc.

und da wird eine breite zugewiesen

aber wenn ich ein margin dem content gebe,habe ich das problem, dass (ich klappe mein menu, bei dem klick auf den header zu mit einem accordion von ajax)dann sich der content container nicht nach links verschiebt über die ganze breite.das soll er aber so machen

gibt es noch andere möglichkeiten?

vielen danke
gruß!
 
Ohne die margin-left-Deklaration hättest du aber das Problem, dass der Inhalt der rechten Spalte ab dem Punkt unterhalb der linken Spalte fortgesetzt wird, an dem die Anzahl der Zeilen in der rechten Spalte höher ist, als die in der linken Spalte.

Zur Veranschaulichung des Sachverhalts ein kleines Beispiel:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_hurzwurz</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#nav {
float:left;
background:#ccc;
}
#content {
background:#eee;
}
-->
</style>

</head>
<body>

<div id="nav">
     <ul>
         <li>Listeneintrag 1</li>
         <li>Listeneintrag 2</li>
         <li>Listeneintrag 3</li>
         <li>Listeneintrag 4</li>
     </ul>
</div>

<div id="content">
     <p>Ein Texabsatz in Zeile 1</p>
     <p>Ein Texabsatz in Zeile 2</p>
     <p>Ein Texabsatz in Zeile 3</p>
     <p>Ein Texabsatz in Zeile 4</p>
     <p>Ein Texabsatz in Zeile 5</p>
     <p>Ein Texabsatz in Zeile 6</p>
     <p>Ein Texabsatz in Zeile 7</p>
     <p>Ein Texabsatz in Zeile 8</p>
</div>

</body>
</html>
mfg Maik
 
hi
damit hast du wohl recht!
ne andere methode ist wirklich nicht möglich?
dann muss ich es wohl umbauen
auch das menu, sonst klappt es nicht so
wie es am besten ist
lg
hurz

Update: ich setzt jetzt das margin dann per javascript auf 0px
allerdings zeigts jetzt ohne das float: left den container zu weit unten an.
sprich der steht nicht rechts neben des menüs sondern, unter dem menü,eben z.b. 200px weiter rechts
 
Zuletzt bearbeitet:
Hi,

ohne die float:left-Deklaration für das linke Element müsste in diesem Fall für das rechte Element ein entsprechender negativer margin-top-Wert gesetzt werden, damit es nach oben neben die linke Spalte verschoben wird.

mfg Maik
 
das klappt zwar
allerdings nur in verbindung mit "width: auto;"

aber: jetzt ist mein linkes menü nichtmehr clickbar
sprich ich kann aus der navigation nichtsmehr auswählen...
 
Tja, entweder verwendest du doch die float-Eigenschaft, oder du gibst der Navigation mittels z-index eine höhere Schichtposition:

Code: 
#nav {
position:relative;
z-index:2;
}
Und achte doch bitte in deinen Beiträgen auf die Netiquette bzgl. der Groß- und Kleinschreibung.

mfg Maik
 
hi, danke
z-index 2 sowohl als auch 1 haben keinen unterschied gemacht
sprich habs wieder auf float gesetzt

daraus resultiert allerdings, dass es immer noch nicht tut was es sollte ;)


UPDATE: hi, danke nochmal für deine mühe

musste jetzt einiges umstrukturieren. sprich weniger floats sonst in den anderen containern
clear raus
und overflow: visible / hidden rein

habs also geschaft
vielen dank!
gruß
hurz
 
Zuletzt bearbeitet:
Fein. Und beim nächsten Mal lass die Shift-Taste auf deiner Tastatur nicht unbeachtet links und rechts liegen.

Unser Forum ist kein Chatroom. Kurz-Beiträge ("Ein-Zeilen Postings"), die einfach so ins Forum "geklatscht" werden, werden ohne Vorwarnung von einem Moderator oder Administrator gelöscht. Das gleiche gilt insbesondere für Beiträge, die in Rechtschreibung, Satzbau und Verständlichkeit nicht ein vernünftiges, allgemein übliches und altersgruppen-übergreifendes Niveau erfüllen. Jugendsprache, regional verbreitete Dialekte und durchgehend kleingeschriebene Beiträge sind ebenfalls unerwünscht. Mit anderen Worten: wer erfolgreich die im Deutsch-Unterricht erlernten Kenntnisse praxisnah auf unserem Forum anwenden kann, wird nicht mit dieser Regel in Konflikt kommen. "Wiederholungstäter" werden, nachdem sie zuvor von einem Moderator auf die Mängel hingewiesen wurden, ggf. unbefristet gesperrt.
Zum Vergrößern anklicken....
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück