CODEWITHSUNDEEP
csscss-float
Quasipickle
Quasipickle

Reputation: 4498

How do I expand floated children to height of parent?

I've got a <ul> I'm using as navigation. When the screen gets sufficiently small, some of the nav items' text goes on to 2 lines - which is fine. However, I'd like to have the nav items that are still on one line, expand to the full height of the <ul>.

http://jsfiddle.net/quasipickle/msTDe/ as an example - when the right (CSS/Result) column gets sufficiently small enough, you'll see the "AB BC" text split into 2 lines, but the first to items don't grow.

This problem occurs at specific breakpoints, so I can explicitly set the height if I have to, but I'd rather have it happen automagically if possible.

Upvotes: 1

Views: 72

Answers (2)

Tyler
Tyler

Reputation: 19848

Did it with a fixed height.

ul{ width:100%; height:40px;background:red; overflow:auto;position:relative;}
ul li{ position:relative; float:left; background:green; padding:0 3px;height:100%;}
ul li:nth-child(3){ width:10%; }​

Upvotes: 0

Luca
Luca

Reputation: 9715

The only way I'm aware of, is that you can have height:100% on your <li> elements but you will need to have a fixed height on your <ul> otherwise it won't work.

Unfortunately what you are trying to achieve is an easy behaviour when trying to stretch elements to fill the parent width, but it does not work the same way with height.

Upvotes: 2

Related Questions