I am working on a webpage layout that consists of multiple modules, each made up of individual <div> elements measuring 159 pixels in width and 160 pixels in height. These modules are supposed to be arranged in a row at the center of the page. The containing <div> is currently set to 70% width.
However, I'm facing an issue when the window size is adjusted, causing some modules to drop down to the next row. At this point, they are centered again instead of aligning to the left as I desire. This results in uneven distribution where, for example, four modules are displayed above with one module centered below them.
Currently, using text-align: center is not an option due to the undesired centering behavior upon resizing. While it does work perfectly for initial alignment, it fails to readjust when modules move to the next row. Is there a way to address this effectively through CSS alone? If not, I am open to exploring jQuery solutions.
#modulesAreaBlock { /*Outer container DIV*/
margin-top: 50px;
width:70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#modulesCenter { /*DIV for centering the modules within the outer DIV*/
display: inline-block;
text-align: left;
}
.moduleBlock { /*Individual "module" DIVs*/
text-align:center;
height: 160px;
width: 159px;
margin-bottom: 2px;
display: inline-block;
zoom: 1;
*display: inline;
_height: 160px;
}