UL border coming above LI - css

Question

I was working on the below code:
HTML:
<ul id="Generate">
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
CSS:
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red;
}
#Generate > li {
float:left;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
The UL border is coming on the top as one solid line. And below that I am seeing one row having the LI elements. I was expecting the UL border to encompass all the li elements. Since it's the parent. Why is the browser shrinking the ul?

Answer 1

It's because you are floating all the li's within the UL. If a container contains only floated elements and nothing is explicitly setting the containers height the resulting height of the container will be zero.
Try adding overflow: auto to your UL:
#Generate {
list-style-type:none;
overflow: auto;
padding:0px;
border:1px solid red;
}
This URL is a great resource for all things "Float".
Check out the section titled "The Great Collapse".
https://css-tricks.com/all-about-floats/

Answer 2

you did actualy put the border there by urself :).
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red; <---------border
}
so this will do:
<style>
#Generate {
list-style-type:none;
padding:0px;
border:0px solid red;
}
#Generate > li {
align:left;
width:9%;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
</style>
<ul id="Generate">
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
or you just delete that line... but i think you get the idea

Answer 3

Instead of doing float:left, make it display:inline
#Generate > li {
display:inline;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}

Answer 4

IMHO browser shrinks ul because the UL is a flow content category object and as we know from w3c specifications the width of this kind of objects in normal flow calculates as ''margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block' (W3C site). So, if you want to ul's border to encompass only the "li" elements, you may add 'display:inline-block;' in your css rule for #General as mentioned below:
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red;
display:inline-block;
}
https://jsfiddle.net/uw4krhL1/