[SOLVED] (CSS) All my other forums are failing me. How can I make this layout work?

I know, not even figuratively a programming language, but I know one of you cats here will be an accomplished front end dev.

https://jsfiddle.net/t9Lpfmeb/1/ <-- Everything should fit inside of the red box.

So what I want is an absolute position div (it will become a modal),

: that contains a top row that is short

: a middle row which fills the remaining space

: a bottom row that is short

In the middle row is two columns, side by side

: the left column will house a textarea that should fill the entirety of the left column

: the right column will house a scrollable area that should fill the entirety of the right column

I like fieldsets, but I'll make do with something else if that's the issue.


I am fairly comfortable on the command line, am a full time linux user, fairly confident with PHP, JS, Apache, Proxmox, Wireguard, ESP32 etc ... CSS seems like one of the most difficult things I've had to learn in recent years. I don't know what is wrong with me lol.

I am no CSS expert by any means, but have been playing with grids for my own project.

How do you feel about getting rid of the embedded grid on the second row (that seems to be what is causing your issue)?

One grid, two equal columns, three rows. First and last row span 2 columns. It seems to do what you want.

https://jsfiddle.net/fy9uxpn5/

Originally Posted by goumba I am no CSS expert by any means, but have been playing with grids for my own project. How do you feel about getting rid of the embedded grid on the second row (that seems to be what is causing your issue)? One grid, two equal columns, three rows. First and last row span 2 columns. It seems to do what you want. https://jsfiddle.net/fy9uxpn5/

Deadly!

Thanks so much!

My intuition never works when I approach CSS problems. Do you know what the issue was with my approach?

Grids are funny beasts, I'm learning. The fractional unit in particular seems to present problems in my own project, where an embedded grid and some other blocks refuse to stay within it's parent. If I use "hard" units - like pixels, points, inches, etc - it doesn't happen. Just the flexible units seem to overflow without reason.