I could use some assistance with this particular issue.
What's been successful so far:
I have a large div within my body (and also inside main, for css-related reasons), housing eight smaller divs divided into four columns. I've applied float:left; to the divs to display them side by side. Alternatively, I could achieve the same result using display:inline-block;. The large div has a width of 100%, and the smaller divs are intended to automatically occupy this full width. Among the four columns, two comprise a single div each with height:100%;, while the other two incorporate two divs stacked vertically, each div having height:50%.
Challenges faced:
I'm aiming to maintain these divs seamlessly aligned next to each other without any line breaks, regardless of screen resolution or device orientation.
Therefore, I seek guidance on horizontally centering the large div (and potentially vertically) – I can't seem to understand why margin:0 auto; isn't functioning as expected here. Moreover, I would appreciate insights into why responsive resizing of the divs to fill 100% width of the outer div in correspondence to viewport dimensions is not operational, or where I may be going wrong.
EDIT: The internal divs (containing images) should only scale proportionally; if the viewport height is insufficient compared to the image height, the outer div must be scaled down horizontally. Essentially, I want all divs to be displayed alongside each other in their accurate proportions across varying resolutions/orientations.
PS: The widths of the four columns do not consistently equate (not all are set at 25% of the outer div).
Access the jsfiddle link below:
http://jsfiddle.net/hLzoxmyb/1/
HTML code snippet:
<body>
<main>
<div id="wrapper">
<div id="one">
<figure id="one">
<img src="01.png" alt="01">
</figure>
</div>
<div id="two">
<figure id="02">
<img src="02.png" alt="02">
</figure>
<figure id="03">
<a href="03.html"><img src="03.png" alt="03"></a>
</figure>
</div>
<div id="three">
<figure id="04">
<a href="04.html"><img src="04.png" alt="04"></a>
</figure>
<figure id="05">
<a href="05.html"><img src="05.png" alt="05"></a>
</figure>
</div>
<div id="four">
<figure id="06">
<a href="06.html"><img src="06.png" alt="06"></a>
</figure>
</div>
</div>
</main>
</body>
CSS code excerpt:
body {
background-color:#cccccc;
font-family: monospace;
font-size:120%;
margin:0;
padding:0;
width:100%;
}
div#one figure, div#four figure {
height:80%;
height:80vh;
}
div#two figure, div#three figure {
height:40%;
height:40vh;
}
figure {
margin:0;
padding:0;
}
div#wrapper {
padding-bottom:10%;
padding-bottom:10vh;
padding-top:10%;
padding-top:10vh;
}
div#wrapper div {
float:left;
}
div#wrapper div figure img, div#wrapper div figure a img {
height:100%;
}
main {
/*
bottom:0;
display:block;
left:0;
margin:auto;
max-height:100%;
max-height:100vh;
max-width:100%;
max-width:100vw;
overflow:auto;
position:fixed;
right:0;
top:0;
*/
margin:0 auto;
width:100%;
}