Can someone help me with an issue I am having on my website www.7hermanosmx.com/menu.php? Everything seems to be working correctly except for the yellow boxes (class menuholder) which should be floating left three per row. No matter what I try, they just won't cooperate! I know I must have made a mistake somewhere and it's probably something simple, but I can't figure it out. Can anyone point me in the right direction?
I've included the relevant CSS...
.menutop {
font-size: 18px;
color: #FFF;
background-color: #099;
clear: both;
height: 32px;
padding-left: 15px;
padding-top: 5px;
}
.menuholder {
background-color: #FFC;
width: 250px;
height:auto;
float:left;
font-size:14px;
}
.menutext {
font-style: italic;
color: #666;
}
...as well as the HTML code responsible for displaying the content from the database:
<div data-binding-id="repeat1" data-binding-repeat="{{FULL_MENU.data.groupBy( "TYPE" )}}" style="width:100%">
<div class="menutop">{{$name}}</div>
<div class="menuholder"> <div style="padding:8px">
<div data-binding-id="repeat2" data-binding-repeat="{{$value}}">
<strong>{{NAME}}</strong>
<font style="font-style: italic; color: #004000;">({{COST.currency( "$", ".", ",", 2 )}})</font><div data-binding-html="{{DESCRIPTION}}" class="menutext"></div>
<br />
</div></div>
</div>
</div>