2 Boxen nebeneinander, wobei sich Box 1 in der Breite automatisch an der Breite der 2. Box orientieren soll

[ebody]

Hallo,

https://jsfiddle.net/s9gjwu9u/8/

box2 hat eine Breite von 25%, #box1 sollte jetzt automatisch den Rest der Fläche ausfüllen und müsste eine Breite von 75% haben. Hätte #box2 eine Breite von 30%, müsste #box1 eine Breite von 30% haben usw.

Mit width: auto funktioniert es nicht. #box1 wird mit einer viel zu geringen Breite dargestellt. Wie passt sich #box1 in der Breite immer orientiert an der Breite von #box2 an?

<div id="screen">
  <div id="box1">Box1</div>
  <div id="box2">Box2</div>
</div>

	#screen {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
  
  #box1 {
		float:left;
		width: auto;
		height: 100%;
    background-color: blue;
	}
  
  #box2 {
		float:left;
		width: 25%;
		height: 100%;
    background-color: green;
	}

Gruß ebody

[Matthias Scharwies]

Servus!

box2 hat eine Breite von 25%, #box1 sollte jetzt automatisch den Rest der Fläche ausfüllen und müsste eine Breite von 75% haben.

#screen {
  display: grid;
  grid-template-columns: 25% 1fr;    /*linke Spalte 25%, rechte übernimmt den Rest */
}

Hätte #box2 eine Breite von 30%, müsste #box1 eine Breite von 30% haben usw.

#screen {
  display: grid;
  grid-template-columns: 1fr 1fr;   /*Beide Spalten sind gleichbreit, verteilen sich auf den verfügbaren Platz */
}

19 von 100 verstehen nichts von Prozentrechnung, aber irgendwie habe ich nicht verstanden, was du willst.

**Wie passt sich #box1 in der Breite immer orientiert an der Breite von #box2 an?

#screen {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(20em, 60em); 
}

Hier hast Du #screen in drei Spalten aufgeteilt; die erste und zweite sind gleichbreit und verteilen den Rest, der nach der Breite der 3.Spalte, die mind. 20em und max. 60em Breite hat, übrigbleibt.

• Wiki: grid

edit: Du willst nur 2 Spalten. Warum sollen die nicht den verfügbaren Raum von #screen einnehmen? Wenn Du rechts einen Rand willst (wozu denn?), dann könntest du die width:100% rausnehmen oder verringern?

Herzliche Grüße

Matthias Scharwies

[ebody]

Hi,

Du willst nur 2 Spalten. Warum sollen die nicht den verfügbaren Raum von #screen einnehmen? Wenn Du rechts einen Rand willst (wozu denn?), dann könntest du die width:100% rausnehmen oder verringern?

Es ist eh nur ein Beispiel Code...Die beiden Boxen sollen ja immer die volle Breite von #screen einnehmen. #screen ist 100% breit. Wenn #box2 eine Breite von z.B. 25% oder 35 oder 48% etc. hat, soll sich die Breite von #box1 automatisch anpassen, so das #box1 die noch zur Verfügung stehende Breite ausfüllt.

Somit würden #box1 und #box2 die komplette Breite von #screen jeweils ausfüllen.

Gruß ebody

[Matthias Scharwies]

Servus!

Es ist eh nur ein Beispiel Code...Die beiden Boxen sollen ja immer die volle Breite von #screen einnehmen. #screen ist 100% breit. Wenn #box2 eine Breite von z.B. 25% oder 35 oder 48% etc. hat, soll sich die Breite von #box1 automatisch anpassen, so das #box1 die noch zur Verfügung stehende Breite ausfüllt.

Wo kommen die Werte 25, 35, 48% her? Du kannst #box2 ja einen Wert wie auto oder min-content geben.

Somit würden #box1 und #box2 die komplette Breite von #screen jeweils ausfüllen.

Gruß ebody

Herzliche Grüße

Matthias Scharwies

[ebody]

Hi,

ich habe gerade einige Videos über grid geguckt und es scheint eine echte Erleichterung zu sein, wenn man es dann mal wirklich verstanden hat.

Um bei dem Beispiel zu bleiben, wenn man #box2 über einen Button ausblenden würde und man verwendet diesen Code...

#screen {
  display: grid;
  grid-template-columns: 3fr 1fr;    
} 

...dann bleibt die Aufteilung so bestehen, also das erste Element #box1 nimmt 3fr der Fläche ein und #box2 1fr, obwohl die Box gar nicht mehr eingeblendet wird. Ist es möglich, wenn #box2 ausgeblendet ist sich #box1 automatisch über die gesamte Breite erstreckt?

https://jsfiddle.net/s9gjwu9u/36/

Gruß ebody

[Matthias Scharwies]

Servus!

Hi,

ich habe gerade einige Videos über grid geguckt und es scheint eine echte Erleichterung zu sein, wenn man es dann mal wirklich verstanden hat.

Um bei dem Beispiel zu bleiben, wenn man #box2 über einen Button ausblenden würde und man verwendet diesen Code...

#screen {
  display: grid;
  grid-template-columns: 3fr 1fr;    
} 

...dann bleibt die Aufteilung so bestehen, also das erste Element #box1 nimmt 3fr der Fläche ein und #box2 1fr, obwohl die Box gar nicht mehr eingeblendet wird. Ist es möglich, wenn #box2 ausgeblendet ist sich #box1 automatisch über die gesamte Breite erstreckt?

https://jsfiddle.net/s9gjwu9u/36/

Du würdest das mit Javascript ausblenden?

Mir fällt jetzt grad nur ein, dass man #box1 dann mit classList.add eine neue Klasse gibt, die folgenden Regelsatz enthält.

.ganzeSeite {
  grid-column: 1 / 3;
}

Der Vorteil von grid ist, dass man mit einer Festlegung für das Elternelement oft schon das gesamte Layout bestimmt und die einzelnen Kindelemente nur noch feintunen muss.

---

Das würde ich dann doch mit Flexbox machen:

<style>
.parent {
    display: flex;
}
#box1 {
    flex-grow: 1;
		background: green;
}
	
#box2 {
		background: blue;
		/* display: none; */
}
</style>

<div class="parent">  
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</div>  

Das Elternelement wird mit display: flex; zum Flex-Container. flex-grow bestimmt, wie viel Platz das Element erhält. Wenn #box1 ausgeblendet ist, dann ist das die gesamte Breite.

#box2 kannst du jetzt eine absoluten (oder prozentuale) Breite geben (solltest Du aber imho nicht), oder einfach ein padding um den vorhandenen Inhalt geben.

Hier ganz kurz und übersichtlich:

2 Columns Layout with Flexbox

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@ebody

...dann bleibt die Aufteilung so bestehen, also das erste Element #box1 nimmt 3fr der Fläche ein und #box2 1fr, obwohl die Box gar nicht mehr eingeblendet wird. Ist es möglich, wenn #box2 ausgeblendet ist sich #box1 automatisch über die gesamte Breite erstreckt?

Auch das geht mit Grid, allerdings nicht mit vorgegeben Spalten, sondern mit auto-fit. (Beachte den Unterschied zwischen auto-fit und auto-fill)

Box 1 dehnt sich über 3 Spalten aus; ist damit dreimal so breit wie Box 2 (wenn vorhanden).

☞ Guckst du

LLAP 🖖

[beatovich]

hallo

Ich denke, grid oder flexbox kommen deinem Anliegen besser entgegen.

[ebody]

Hallo und vielen Dank,

grid und flexbox kannte ich noch gar nicht, werde ich mir anschauen.

Hier ist noch eine andere Lösung https://jsfiddle.net/s9gjwu9u/14/

Gruß ebody

[Gunnar Bittersmann]

@@ebody

grid und flexbox kannte ich noch gar nicht, werde ich mir anschauen.

Das sind Lösungen.

Hier ist noch eine andere Lösung https://jsfiddle.net/s9gjwu9u/14/

Floats sind keine Lösung, sondern ein Hack. Und kein zeitgemäßer mehr.

LLAP 🖖

[Matthias Scharwies]

Servus!

Hier ist noch eine andere Lösung https://jsfiddle.net/s9gjwu9u/14/

Das Floaten ist eigentlich nur für die Positionierung von Bilder, etc in Fließtext gedacht. Warum ist Box1 jetzt plötzlich rechts? Das bringt nur weitere, unerwartete Probleme.

• Wiki: CSS/Tutorials/Ausrichtung

grid und flexbox kannte ich noch gar nicht, werde ich mir anschauen.

Die sind sehr zu empfehlen.

Tipp: Und löse dich von festen Breiten! (Auch 25% sind eigentlich eine feste Breite, da du ja nicht weißt, ob dass 25% eines Handys oder eines 60''-Zoll-Megabildschirms ist.)

Gruß ebody

Herzliche Grüße

Matthias Scharwies