I am having an issue with my CSS and HTML I believe and can not find a workaround. I am trying to have a set of 6 divs holding images at the top of the page, a div with just text in it, with a set 3 divs wide just below that, with a mixture of text and images each. What is currently happening is the top 6 blocks display correctly at the top, then there is a large blank space with the sets of 3 divs below that. The text that is supposed to be between them does not display at all. My HTML code is:
<div class="page">
<a href="/menu/kale-grain-bowls"><div class="col-m-2 col-2 kale-grain-bowls">Kale & Grain Bowls</div></a>
<a href="/menu/salads"><div class="col-m-2 col-2 salads">Salads</div></a>
<a href="/menu/burgers-sandwiches"><div class="col-m-2 col-2 burgers-sandwiches">Burgers & Sandwiches</div></a>
<a href="/menu/sides"><div class="col-m-2 col-2 sides">Sides</div></a>
<a href="/menu/smoothies-shakes"><div class="col-m-2 col-2 smoothies-milkshake">Smoothies & Milkshakes</div></a>
<a href="/menu/kids-real-meals"><div class="col-m-2 col-2 kids-real-meals">Kid's Real Meals</div></a>
<div class="menu-type>Kale & Grain Bowls</div>
<div class="foodcontent">
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/spicy-avocado-lime"><div class="spicy-avocado-lime">SPICY AVOCADO & LIME</div></a>
<div class="textblock">kale, sautéed veggies, avocado, black beans, corn, grape tomato, queso fresco, lime, cilantro, chipotle puree, red pepper vinaigrette</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/toasted-almond-ginger"><div class ="toasted-almond-ginger">TOASTED ALMOND & GINGER</div </a>
<div class="textblock">kale, sautéed veggies, bok choy, tamari almonds, red cabbage, enoki mushrooms, mint, toasted almond-ginger sauce</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/local-apple-bacon"><div class="local-apple-bacon-bowl">LOCAL APPLE & BACON BOWL</div></a>
<div class="textblock">kale, avocado, NH slab bacon, local apples, cherries, dried cranberries, sunflower seeds, scallions, red wine vinegar, olive oil</div </div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/power-bowl"><div class="power-bowl">POWER BOWL</div></a>
<div class="textblock">kale, sesame carrots, Brussels sprouts, crunchy chickpeas, pepitas, local egg, tomato vinaigrette</div></div>
<div class="foodblock col-m-3 col-3"><a href="kale-grain-bowls/farmstand- tomato-basil"><div class="farmstand-tomato-basil">FARMSTAND TOMATO-BASIL</div></a>
<div class="textblock">kale, yellow & green beans, corn, heirloom tomatoes, grilled halloumi cheese, lima beans, Kalamata olives, sunflower seeds, basil vinaigrette</div>
</div></div></div>
My css is:
.foodblock{
float: left;
margin: 10px;
height: 400px;
bottom: 50px;
}
.textblock{
float: left;
margin: 20px;
text-align: center;
}
.menu-type{
text-align: center;
font-weight: bold;
font-family: "Times New Roman", Georgia, Serif;
font-size: 2.5em;
}
.spicy-avocado-lime{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.toasted-almond-ginger{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.local-apple-bacon-bowl{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.power-bowl{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.farmstand-tomato-basil{
height: 200px;
background-image: url('../images-source/communitybottom.png');
float: left;
width: 100%;
}
.foodcontent{
bottom: 500px;
}
Please help if you have any idea what could be causing this issue.
You have a bunch of errors and missing brackets in your HTML. I've cleaned it up and threw it in a fiddle:
https://jsfiddle.net/7gohamt3/
For example you were missing closing quotes on this line:
<div class="menu-type>Kale & Grain Bowls</div>
This should fix your problems.