Recently while doing practical from StunningCSS3 Book, I faced this problem. First please Look at the code.
HTML:
<h3>Download:</h3> <ul> <li><a href="video/cary.mov">Cary riding a horse for the first time (MOV)</a></li> <li><a href="photos/lymepark.jpg">Zoe at Lyme Park</a></li> <li><a href="photos/dovedale.jpg">Cary and Zoe in Dovedale Valley</a></li> <li><a href="photos/sudburyhall.jpg">Zoe at Sudbury Hall</a></li> </ul>
CSS:
h3 { float: left; font-size: .8em; font-weight: normal; text-transform: uppercase; } ul { overflow: hidden; /*My Problem lies Here - Probably*/ list-style: none; } li { float: left; }
As you can see the element h3 is Floated left and all li Elements are also floated left. If we reduce the browser width the last li should be drop below h3. But in this case it is just below first li element.
I have attached output of above code.
I think there should magic of overflow:hidden in Ul. That overflow:hidden is clearfix or Something else that cause last li to drop just below first li ?
P.S: In original code I have used reset.css that gives 0 margin and padding to h3. Means that is not height of h3 which cause this effect.
Attachment | Size |
---|---|
Selection_001.png | 17.35 KB |
UL is a block level element
UL is a block level element so the result is what is to be expected.
You could try:
UL { display:inline; }
It may give what you are after.
No output Difference.
Yes, But if I just keep default display value of ul (block) and remove overflow:hidden line then it gives same output, as display:inline with overflow:hidden gives. I can't understand how it works.
Solved.
Thanks Sir, Got my answer. I forgot about Float's main Property.It goes outside of Content Flow. Yet text wraps around it. Just to clear it in my case I used Outline:solid 1px red and played with overflow display and clearfix. Here is a codepen link for those who wants to understand.http://codepen.io/DhruvPatel/pen/ploDI