CODEWITHSUNDEEP
htmlcss
Tara
Tara

Reputation: 261

How to get li to stretch down

the example can be seen here: http://www.animavivo.com

See the side where it says "Please a lot"/"Fault a man"/etc etc? I would like each li come straight down, preferably using percentages so that they can adapt based on how tall the title is. I have a feeling its an overflow problem but I don't know how to fix it without breaking anything else

I hope that makes sense. It's late and I'm not thinking straight. Thanks

Upvotes: 0

Views: 46

Answers (2)

Vikas Ghodke
Vikas Ghodke

Reputation: 6665

You need to give #magazine a fixed height lets say in your case 425px; and then you need to give #magazine ul height:100% and li to 25%.

CSS

#magazine {
    height: 425px;
}

#magazine ul {
    border-left: 8px solid #464646;
    background-color: #efefef;
    height: 100%;

}

#magazine ul li {
height: 25%
}

Upvotes: 2

Nitesh
Nitesh

Reputation: 15779

Here is the solution.

The CSS Changes:

#magazine {
    box-shadow: 0 0 5px #191919;
    height: 503px;
    overflow: auto;
}


#magazine ul {
    border-left: 8px solid #464646;
    height: 25%;
}

Change the CSS for the above and you will get your li to be stretched.

PS: It works on resolution change also.

Upvotes: 2

Related Questions