✔ 2 Divs, 1x Fixe Breite & 1x Variable Breite

T

Tinsu

Grünschnabel
Hallo zusammen

Da ich nun seit etwa 3h an diesem Problem sitze und keinen Schritt weiter komme, habe ich mich entschlossen, mich in diesem Forum anzumelden, um die Profis meine Arbeit machen zu lassen.

Ich habe ein Problem mit einem Webprojekt, welches ich von einer Drittperson (er hat nur beschränkte HTML bzw. CSS Kentnisse) übernommen habe und für ein bisschen Geld anpassen soll. Ach und GOOGLE habe ich benutzt, nur so zur Info :D

Zum Problem:
Ich habe ein Eltern div, nennen wir es tab_container und 2 Kinder Div left_box & main.

Left_box ist eine Art Auswahlmenü im anderen Div soll später dern Output einer sql Abfrage angezeigt werden.

Das Elternelement soll sich bei verkleinern des Browserfensters ebenfalls verkleiner. Kein Prolem, also setze ich die Breite auf 100%.

Das Left_box Div hat eine fixe breite. Das main Div eine variable. Wie finde ich nun heraus, wie breit das main div sein soll?

Im Internet habe ich die Lösung mittels JS gefunden. Giebt es keine einfachere Lösung? kann man nicht irgendwie anders 100% - 200px = width: px rechnen?

CSS:
Code: 
tab_container {border-top: none;clear: both;float: left;overflow: hidden; width: 100%;background: #fff;padding-top:30px; min-width:1040px ; background-color:yellow;}

main{ margin:12px 0 18px 0;padding:0;float:left;border:1px solid #dedee0;min-height:265px;min-width: 790px}

left_box{ width:230px ;margin:12px 7px 0 0;padding:5px;min-height:255px;background:url(../images/gradient.jpg) repeat-x 0 0 #fff;border:1px solid #dedee0;float:left}

Hoffe die Angaben reichen euch.
 
Tinsu hat gesagt.:
Das Left_box Div hat eine fixe breite. Das main Div eine variable. Wie finde ich nun heraus, wie breit das main div sein soll?

Im Internet habe ich die Lösung mittels JS gefunden. Giebt es keine einfachere Lösung? kann man nicht irgendwie anders 100% - 200px = width: px rechnen?
Zum Vergrößern anklicken....
Richte für #main einen linken Außenabstand ein, der mind. der linken Spaltenbreite entspricht (249px = 230px + 7px + 2 * 5px + 2 * 1px), und entferne im Gegenzug seine float-Regel.

Die Angabe zur Mindestbreite für #main wird nicht benötigt, da die Mutterbox #tab_container solch eine schon besitzt.

CSS: 
#tab_container {border-top: none;clear: both;float: left;overflow: hidden; width: 100%;background: #fff;padding-top:30px; min-width:1040px ; background-color:yellow;}

#main{ margin:12px 0 18px 249px; /* linker Außenabstand "249px" anstelle "0" */ padding:0; /*float:left;*/ /* off */ border:1px solid #dedee0;min-height:265px; /*min-width: 790px*/ /* off */ }

#left_box{ width:230px ;margin:12px 7px 0 0;padding:5px;min-height:255px;background:url(../images/gradient.jpg) repeat-x 0 0 #fff;border:1px solid #dedee0;float:left}
 
Zuletzt bearbeitet:
Hey und erstmal Danke für die Antwort.

Nun, dass wäre aber nur eine andere Möglichkeit,
wie ich die Divs anordnen kann.

Wie finde ich aber heraus, wie breit in % das Main Div sein sollte?
 
Mit Hilfe einer Dreisatzrechnung :-)

Bevor du gleich fleißig zu rechnen beginnst, schau dir vorher mein editiertes CSS im Browser an, das für deinen vorgestellten Fall die gängige Praxis ist, ein Element mit absoluter Breite (#left_box) von einem Element mit relativer Breite (#main) umfliessen zu lassen, das die (absolute o. relative) Restbreite des Elternelements (#tab_container) einnimmt / ausfüllt ;-)
 
Zuletzt bearbeitet:
Guten Morgen, erstmal Danke für deine Hilfe.

So ich habe den CSS Code 1:1 übernommen und dada es funktioniert...
Das Penliche an der Sache ist, dass ich genau den selben Code schon verwendet hatte. Durch position: relative die main_box, da sie einen border besitzt aber nur noch teilweise angezeigt wurde.

Jetzt weiss ich auch wieso. Sie wurde durch margin aus dem Bild gedrückt. Ich hoffe ich habe es richtig verstanden, dass diese box 100% einnahm und genau dieses element mit 100% wurde um + 249px nach rechts verschoben, folglich in der gesamtbreite 100% + 249px mass.
Was natürlich viel zu breit ist. :D

Nun habe ich aber noch ein anderes Problem.
Ich google aber mal und meld mich wider... DANKE

Muss ich dann später einen neuen Thread eröffnen?
Es geht um das Problem, dass margin-top alle Divs im eltern div beeinflusst bzw. verschiebt obschon ich nur das main gerne verschoben hätte...
 
Tinsu hat gesagt.:
Muss ich dann später einen neuen Thread eröffnen?
Zum Vergrößern anklicken....

Nö, denn die Problematik hast du doch schon hier angesprochen, und einmal sollte da ausreichen :D


Tinsu hat gesagt.:
Es geht um das Problem, dass margin-top alle Divs im eltern div beeinflusst bzw. verschiebt obschon ich nur das main gerne verschoben hätte...
Zum Vergrößern anklicken....

Versuch es mal anstelle von margin-top für #main mit padding-top für das <body>-Element.
 
Nachtrag: Wenn es sich bei #main noch immer um das eingangs vorgestellte Element handelt, kann ich soweit keine Verschiebungen der übrigen Elemente registrieren, wenn ich seinen derzeitigen margin-top-Wert aufstocke :confused:

Ist die Seite irgendwo online zu begutachten, um das Mißverständnis aufzuklären?
 
Hey... das Problem hat sich unterdessen verlagert. Ich habe nun irgendwie geschafft die Elemente so anzuordnen wie ich Sie gerne hätte...nur leider ist das left div 12px vom oberen Rand und Main 12px vom oberen Rand entfernt... nur ist Main weiter oben -.- im ff & ie das selbe. Hier die CSS Ausschnitte und ein Bild zum veranschaulichen...
Ach und die Drittperson genemigt kein Upload... ;D also kann ich nur Bilder anbieten.

Zum vorherigen Problem, anscheinend laut Google jedenfalls, hatte ich das sogenannte collapsing margins Problem... hatt sich aber jetzt wieder von alleine gelöst.

Zusätzlich habe ich noch verschwiegen, dass unter dem Main div noch ein weiteres div steht aber das erkennst du ja im Bild. Dessen Anordnung stimmt soweit.

http://img534.imageshack.us/img534/8162/beispiel.png

CSS:
Code: 
.left_box{ width:230px; margin: 12px 7px 0px 0px; padding:5px;min-height:255px;background:url(../images/gradient.jpg) repeat-x 0 0 #fff;border:1px solid #dedee0;float:left}

.main2{ margin-top: 12px; margin-left: 249px; padding:0px; border:1px solid #dedee0;min-height:265px;}
.main1{ height:30px; margin-top: 12px; margin-left: 249px; padding:0px; border:1px solid #dedee0;}

.container {border-top: none;clear: both;float: left;overflow: hidden; width: 100%;background: #fff; padding-top: 30px; min-width:1040px ;}
 
Setz die margin-top:12px-Regeln von .left_box und .main2 oder .main1 (je nachdem welches von beiden oben sitzt) auf margin-top:0, und addier diesen Wert zur padding-top:30px-Regel des Elternelements .container hinzu.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück