Different lenghts of text, same size

[Go48websites]

I'm making a small site and it contains categories.

I am trying to get these categorie containers all the same size but because the text in these container is not the same size, the container also varies in size. I tried giving each <li> a specific <div> but that didnt work out to well.

 

This is the HTML (only contains the list)

<div id="categoriemenu">					<div id="lifestyle">	<li><img src="categorielifestyle.jpg"><a href="#">LIFESTYLE</a></li></div>					<div id="dieren">		<li><a href="#">DIEREN </a></li></div>					<div id="electronica">		<li><a href="#">ELECTRONICA</a></li></div>					<div id="informatica"> 	<li><a href="#">INFORMAICA</a></li></div>					<div id="consument">	<li><a href="#">CONSUMENT</a></li></div>					<div id="roddel">		<li><a href="#">RODDEL</a></li></div>					<div id="motors">		<li><a href="#">MOTORS</a></li></div>					<div id="autos">		<li><a href="#">AUTOS</a></li></div>				</div>

 #categoriemenu li a:hover {color: #CCCCCC;background-color: #FFFFFF;}#categoriemenu li a {color: #000000;background-color: #FFFFFF; padding: 10px 75px 20px 75px;width: 100%;text-decoration: none; }#categoriemenu  li {background-color: yellow;display: block; border: 5px solid #FFFFFF;text-decoration: none;padding: 200px 10px 50px 10px;margin: 10px 10px 10px 10px;  float: left;}#categoriemenu  li:hover {background-color: green;display: block; border: 5px solid #FFFFFF;text-decoration: none;padding: 200px 10px 50px 10px;margin: 10px 10px 10px 10px;  float: left;

I attached the full code for the site to the post also in case I forgot something.

 

The image below is what I have now.

 

 

As you can see it also says "IMG here in the middle" thats because of a smaller problem, where if I put the img in the <li> the image is not centered in the middle. But more like this:

 

The colors of everything are purely there to make everything visible. A good example of what I would like to achieve is

https://play.google.com/store

 

the "popular games" "updated games" are all in containers the same sizes.

 

I'm sorry for this long post, and I hope you can help me.

Thanks in advance.

PROcategorie.css

PROcategoriekiezen.html

Edited December 29, 2014 by Go48websites

[dsonesuk]

Then you have to define a fixed width px unit or maybe percentage, as the link does for each game block item. Using float will cause it to shrink to widest content width within it.