CODEWITHSUNDEEP
htmlcss
vini
vini

Reputation: 4722

equal heights to divs containing data - CSS

I am trying to give an equal height to all the divs for various screen sizes. However on mobile of different screen sizes this doesn't work correctly

My code:

https://jsfiddle.net/90umLkak/

<div class="CustomList-customListContainer"><!-- react-empty: 292 --><section class="CustomList-header"><div class="CustomList-headerCont"><div class="CustomList-heartIcon"><img class="CustomList-imageTag" src="/static-listing/images/heart.svg" alt=""></div><div class="CustomList-Settings"></div><div class="CustomList-ListHeading"><button class="CustomList-ListHeading">My Favorites</button></div></div><div class="CustomList-itemsCount"><button class="CustomList-totalItems">7 items</button></div></section><div class="CustomList-imageContainer" style="width: 50%; height: 100%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%;"><a href="/savedlist?id=myFavorites"><img class="CustomList-imageTag" src="https://www.concordia.ca/students/health/_jcr_content/content-main/textimage/image.img.png/1462990904049.png" alt=""></a></div><div class="CustomList-imageContainer" style="width: 25%; height: 50%; background: rgb(241, 243, 244);"><a href="/savedlist?id=myFavorites" style="
    width: 100%;
    height: 100%;
    display: block;
"><div class="CustomList-productsCount"><!-- react-text: 327 -->+ <!-- /react-text --><!-- react-text: 328 -->3<!-- /react-text --></div></a></div></div>

enter image description here

Upvotes: 0

Views: 50

Answers (2)

Pubudu Dodangoda
Pubudu Dodangoda

Reputation: 2874

The rule which says height: 50% doesn't work because there is no reference height. i.e - "50% of what?"

The solution is to set the height of the parent container. In your case, you have to set the height of the div with classname CustomList-customListContainer explicitly.

If I may go one step ahead of your question, there are many other problems with your code. I'll list just four of them.

  1. It is a good idea to define styles using css classes, rather than using inline style rules
  2. Don't try to change the height of tiles using margins (For example in your tile with the content +3). Margin property should be used to set margins, not the height or width.
  3. The div inside your '+3' tile has a top: 37% which doesn't work at all. You can't set the top value if the position is relative.
  4. You seem to be trying to re-invent the wheel. So much CSS rules will only make it harder to create a good product(30000+ lines when pretty formatted). Instead, use a framework like bootstrap to implement the grid. It will be very easy to make the site responsive for different types of screens.

Anyway, Shown below is an example on how to fix such issues, notice how I've added a parent div to the image div elements to fix the height of the container.

example fix

Upvotes: 0

Salketer
Salketer

Reputation: 15711

Your height styles are completely useless because the parent does not have an height. The reason why it seems to be working fine is because your images are scaled to size and they have a 1:1 size ratio, making the height correct.

Since the code you posted was absolutely unusable, I've given you a MINIMAL snippet to show how you can do.

.container {
  width: 200px;
  height: 100px;
}

.container .big {
  height: 100%;
  width: 50%;
}

.container div {
  height: 50%;
  width: 25%;
  float: left;
  border: 1px solid white;
  background-color: blue;
  box-sizing: border-box;
}
<div class="container">

  <div class="big"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Upvotes: 2

Related Questions