How can I make my list items width and height properties responsive on resize?

Hi all,

Basically I want to my list items to resize in width and height when the window/containing ul is resized, at the moment i can only get this to work on the width, the height never seems to change?

Can anyone advise how this can be achieved?

Here is my code:


#test li{background:url('') no-repeat 0 0;max-width:30%;width:100%;max-height:30%;height:100%;float:left;margin-left:1px;}
#test li:first-child{margin-left:0;}​


<ul id="test">

#test li{background:url(‘’) no-repeat 0 0;max-width:30%;width:100%;max-height:30%;height:100%;float:left;margin-left:1px;}

You have, what I would call, some logical conflicts here. if the MAX the height can be is 30% , how can you then declare the height to be 100%. This is what is probably causing the problem.

Hey, yeah i thought that was out, basically i was following what i had written for max-width. Taking max-height out however doesnt improve my problem at all?

Well the other issue is height:100% ; ( on both the UL/LIs).

There is no % height calculation in CSS. In other words, if the UL was , say height:500px you’d see the height: some%; work. In other words for a child element , other than HTML/BODY to receive % height, the parent has to have an explicitly declared “height:” and no, min-height doesn’t count as declaring “height”
. That being said your content will be the height f the content text.