Back in the day, I learned how to create a website by enclosing all content below the body tag within a div with the class "wrapper." This approach made sense as it allowed for easy vertical and horizontal alignment of the entire content.
Just yesterday, I came across this enlightening video tutorial.
At 07:15, the presenter mentioned that the technique I had been using is now outdated. Instead, he recommended using multiple section tags and placing wrapper divs inside those sections.
This way, the section tags fill the screen, while the content can be aligned using the wrapper divs.
I decided to create a demo to experiment with this structure:
$color1: rgba(173, 216, 230, 1.0);
html,
body {
height: 100%;
}
body {
background-color: #bbb;
margin: 0 1%;
}
.wrap {
width: 100%;
max-width: 800px;
margin: 5vh auto;
background-color: white;
text-align: center;
}
.content .wrap p {
padding: 20px 5%;
}
.footer .wrap {
background-color: #999;
color: white;
font-weight: 900;
letter-spacing: 1.2px;
}I thought it was working fine... until...
Now, I'm struggling to understand the clear benefits of this nested section-wrap structure. Is it just adding more complexity to the HTML?
Despite my doubts, I don't want to dismiss the idea without exploring its potential further.
So, if anyone could provide a concrete example of how this nested structure can enhance a website and serve a specific purpose, I would greatly appreciate it.