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

[kyllle]

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:

CSS

#test{max-width:302px;width:100%;max-height:100px;height:100%}
#test li{background:url('http://www.dummyimage.com/100/000/fff') 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;}​

HTML

<ul id="test">
    <li>Hello</li>
    <li>Hihi</li>
    <li>whatsup</li>
</ul>​

[dresden_phoenix]

#test li{background:url('http://www.dummyimage.com/100/000/fff') 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.

[kyllle]

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?

[dresden_phoenix]

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.