Svenska ElektronikForumet

Det här med DIV och CSS...
Jag har en div till vänster och en till höger. Dessa två kan ha olika höjder oberoende av varandra, och täcker tillsammans hela sidans bredd.
Under dessa vill jag ha en DIV som sträcker sig över hela sidans bredd, men alltid befinner sig nedanför den DIV som är högst.
Jag lyckas bara få den undre DIVen att fastna nedanför den högra ovanvarande DIVen, och om den vänstra blir längre hoppar den undre åt höger för att lämna plats.
Sätter jag då clear: both; så hamnar den undre DIVen ovanpå den vänstra så deras innehåll blandas.

Om jag istället stoppar in de två övre DIVarna i en stor DIV, och sen den undre DIVen under alltihop, och behåller clear: both; så funkar det.

MEN! Om det inte ska zoomas ut till myrskitar på mobilen så provade jag meta viewport width=device-width. Jo det blev ju bra, förutom att den undre DIVen alltid blir halva skärmbredden på mobilen!

Så då satte jag view-port = 700. Ah, det funkar!
Men jag måste sätta min-width på den undre 20 mindre än på wrap-DIVen, annars blir det fel storlek och/eller åker ihop mer än allt annat om jag drar ihop webläsarfönstret på desktopen.

Gaah! Går det inte att få en div att hänga nedanför den högsta ovanvarande DIVen oavsett vilken det är utan att nästla DIVar hit och dit?

https://jsfiddle.net/t5kx1L7h/

Det här verkar funka för mig, men det är också så som jag förstod det att du gjort...?

Sen finns ju css grid du kan använda, just för att göra det lättare att layouta.

Så brukar jag göra, bootstrap och fixa grid där hur jag vill. Man får en del på köpet med.

Hmm... kollade genom alla exempel där och det var inget som såg liknande ut.
Det gör ju iofs inget om båda kolumner blir lika höga om innehållet växer bara i ena...

Som det är nu funkar layouten 100% i Chrome, Firefox samt Safari mobil.
I Edge åker den vänstra kolumnen upp över loggan om den högra blir lägre.

Får väl ta och titta lite mer på bootstrap. Kanske klarar jag mig endast med basic grid-css:en samt layouttipsen där.

Skit i edge, den ska ändå ersättas med Chromium som Chrome är baserat på.