I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this?
function row_content(row_number) {
var output = "";
switch (row_number) {
case 1:
icon_row = Array("Arrive", "Park", "Greet", "Sleep", "Wash", "Dress", "Shade");
break;
case 2:
icon_row = Array("Watch", "Cook", "Dine", "Chat", "Chill", "Grill", "View");
break;
case 3:
icon_row = Array("Dream", "Blog", "Splash", "Clean", "Play", "Work", "Design");
break;
default:
return;
}
$j.each(icon_row, function(key, value) {
icon = icon_content(key, value);
output = output + icon;
});
return output;
}
function icon_content(col, name) {
var opener = "<div id='" + name + "' class='icon col-" + col + "'><a href='#'>";
var image = "<img src='img/icons/" + name + ".png' //>";
var verb = "<div id='" + name + "-text' class='icon-verb'>" + name + "</div>";
var closer = "</a></div>";
var output = opener + image + verb + closer;
return output;
}
function fill_rows() {
$j('#icon-row-1').append(row_content(1));
$j('#icon-row-2').append(row_content(2));
$j('#icon-row-3').append(row_content(3));
}
I'm utilizing normalize.css and these are the associated CSS styles:
/* Icons */
.icon {
float: left;
padding: 12px;
text-align: center;
width: 114px;
}
.icon a {
color: #fff;
font-size: 23px;
text-decoration: none;
}
/* Icon Rows */
.icon-row {
position: relative;
margin: auto;
height: 165px;
width: 966px;
}
Follow up: Here is the HTML structure for the setup.
<body>
<div id="wrapper">
<div id="header">
<div id="nav"></div>
</div>
<div id="content">
<div id="icons-wrapper">
<div id="icon-row-1" class="icon-row"></div>
<div id="icon-row-2" class="icon-row"></div>
<div id="icon-row-3" class="icon-row"></div>
</div>
</div>
</div>
</body>