Currently, I am working on a project that requires a responsive page layout using divs. The layout should resemble a grid, with 3 columns that reorganize into 2 columns on smaller screens.
Here is the basic HTML structure I have so far:
<div id="main">
<div id="right-column">Php generated content</div>
<div id="left-column">
<div class="element">Article 1</div>
<div class="element">Article 2</div>
<div class="element">Article 3</div>
<div class="element">Article 4</div>
<div class="element">Article 5</div>
<div class="element">Article 6</div>
<div class="element">Article ...etc</div>
</div>
</div>
http://jsfiddle.net/GeorgesL/1zdx735y/
However, I'm facing an issue where the layout doesn't take up the full width after switching to 2 columns, and I'm struggling to figure out why. Any help would be greatly appreciated!
Just to clarify, the "Articles" mentioned are actually images.
Thank you,
Lucas