3 replies [Last post]
dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 31 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

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.

AttachmentSize
Selection_001.png17.35 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.

dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 31 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

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.

dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 31 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

Solved.

Smile 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

Laughing out loud