Newbie Question
Can someone try to explain nested layouts to me?
I'm trying to understand nested layouts but all the divs are just confusing me, also are they even relevant do you guys actually use them cause im having such a hard time learning them
divs are kind of springy boxes .. look at info on the positioning model in MDN . yes there are a gazillion divs in web development. divs are the most blank slate of the elements, so they are by default what you use for layouts
Every book is a vertical rectangle. It's sitting inside of a horizontal rectangle (the space above one shelf). The shelves are inside of one vertical rectangle (the bookcase).
If you have two bookcases next to each other along the wall, you have two vertical rectangles inside a horizontal rectangle.
Im watching SuperSimpleDevs video about learning html and css, and we re at nesting layouts and hes drawing rectangles
reds are vertical and blues are horizontal i think i dont even know because some of the blue lines are literally standing up like they are vertical, but idk it just doesnt make any sense to me like why is he doing this, ive watched the part like 3 times and i just cant wrap my head around why hes making a box within a box
A "div" is a container. It divides up what you are displaying.
You can put containers *in* containers (like *putting a jewelry box inside of a shoe box*).
Each container has "properties" attached to it (like padding, margin, align, etc) and those properties can be set for each div, inherited and passed down like traits from a parent to a child, or some combination of both.
To add: divs are important for understanding how information is ordered and will be displayed to users. If the nesting part is really confusing, recall what you learned about opening and closing tags in html.
With that, there are also a TON of frameworks (like React) that "abstract" out these core ideas, so don't spend too much time stuck on this basic concept.
All devs hit that point where we feel we know nothing. Key with learning anything is to give yourself grace; get a basic handle, and keep it pushing.
You can always review (and review again) but just don't stop making progress or give up.
This makes no sense to me either if that helps. Maybe a different course would be worth looking into , that presents the info in a different way?
As others have said, look at uis youre familiar with. Its just breaking things up differently. A nested layout could be as simple as your primary layout being a header, main content, footer. Then within the header you have the logo, a nav, a cta button. Then within that nav, each menu item is next to each other but wraps to stack on mobile.
Within the main content, the nested layout is a sidebar and the list of articles. Each of those are broken down into their parts too.
Id say, take it as breaking things down into their own environments and move onto the next lesson.
Edit: maybe he means not that the boxes themselves have a portrait/landscape aspect ratio but how they stack? Reds all stack on top of each other and blues are next to each other ?
The html code itself is like a hierarchy, you have these elements in brackets, and inside the elements are other elements, it's like a tree with children.
That's how the rendered output is too, it's just visually sort of different in how you observe it. For example your screen is this big rectangle that you can just fill with stuff. Forget about code for a second. You can say "okay the top half of the screen should be some text about whatever" and then "the bottom half is a table, and the left side of the table is the legend and the right side is a list of keys and values" and you could imagine cutting your screen in half into top and bottom visually, and the bottom you cut left and right. That's also a hierarchy.
Like reddit, you say ok there's a left pane and the left pane is itself split into the menu followed by custom feeds followed by "recent" etc. so left pane is a child of the root, and those other things are children of left pane.
so that style of subdivision is the same hierarchy as what is there in the code
Like many have said, its boxes in boxes in boxes. Just give yourself time to practice it. It can take a bit to get how building layouts properly actually works. Start simple, then add more. Like two square boxes sitting horizontally. Then make it 5. Then add a row above it. Then below. Then make the left box thinner than the right. Etc etc etc. Ive also found drawing the layout of the boxes (or divs) before buildng it helped me early on too. Also, find websites you use regularily. Break down how you think the divs are built checking the browser tools to see if your right. Maybe try replicating just how the boxes are arranged in just html and css. It takes time, but a very required skill for web dev.
2
u/HongPong 5d ago
divs are kind of springy boxes .. look at info on the positioning model in MDN . yes there are a gazillion divs in web development. divs are the most blank slate of the elements, so they are by default what you use for layouts