I am striving to create a layout like the one shown here: https://i.sstatic.net/LInER.jpg
Presented below is my current HTML structure:
<div id="main">
<div id="content1">
<span>Content1</span>
<div id="text">
<span>Text</span>
</div>
<div id="game">
<span>Game</span>
</div>
</div>
<div id="content2">
<span>Content2</span>
<div id="gallery">
<span>Gallery</span>
</div>
</div>
</div>
<div id="footer">
<span>Footer</span>
</div>
The central section is enclosed within the main div. Content1 represents the left side while content2 denotes the right side. Content1 is further divided into two subparts (nested divs). Despite several hours of effort, I am encountering difficulties with this seemingly simple task.. The issues I am grappling with include:
- I aim for the website to occupy 100% of the browser width
- Although I managed to separate content1 and content2 to align them side by side, adding borders disrupted the alignment process. I attempted solutions like overflow: hidden;, display: inline-block;, and flex display without success.
- To center the elements in content2, would margin: auto be sufficient?
- I also question the appropriateness of the HTML layout provided, uncertain about the degree of nesting allowed. Is nesting primarily reserved for containers or similar structures? Your assistance is greatly appreciated!