My CSS skills aren't the best, so I'm struggling to keep my sidebar at full height even when it doesn't have enough content. Here's my current CSS:
#wrapper {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
#wrapper .sideBar {
background-color: green;
width: 200px;
margin-left: 10px;
overflow-x: hidden;
padding-top: 20px;
}
#wrapper .productsBox{
width: 250px;
margin: 3px;
}
The result I'm currently getting ishttps://i.sstatic.net/j4MhM.png
However, I'm aiming for a layout that looks like this: https://i.sstatic.net/bXs4i.png
Any suggestions on how I can achieve this? Also, I want it to be responsive so that it displays well on mobile devices. That's why I'm using the wrapper. html:
<div id="wrapper">
<form method="get" id="sortForm">
@Html.DropDownList("sort", new SelectList(ViewBag.sortOptions,"Value","Text"), new {@class="form-control", onchange = "sortingChanged()" })
<div class="sideBar">
<strong>Search for products</strong>
<input type="text" class="searchBar" name="SearchString" value="@ViewData["CurrentFilter"]" placeholder="Search.."/>
<hr />
<h6>Price</h6>
<div>
<input type="number" class="priceRangeInput" name="minPrice" value="@ViewData["MinPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Min</span>
</div>
<div>
<input type="number" class="priceRangeInput" name="maxPrice" value="@ViewData["MaxPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Max</span>
</div>
<br />
<hr>
<h6>Types</h6>
<button type="submit" class="btn customGreen" >Set filters</button>
</form>
<br />
</div>
@{
foreach(var p in @Model)
{
<div class="productsBox">
<div class="card">
<a asp-action="Details" asp-route-id="@p.Id">
<img alt="@p.Name" class="contain" src="@p.FilePath" height="300" style="width: 100%;" />
</a>
<h3>@p.Name</h3>
<p class="price">@p.Price kr/@p.Unit</p>
<a asp-action="Details" asp-route-id="@p.Id">
<button class="customGreen">See more</button>
</a>
</div>
</div>
}
}
</div>