How to adjust a floated element's position? - html

Question

I have a ul wrapped in a .box. I have set the bottom border for the .box. The ul items also have bottom border, I want the li border to place over the .box border so that the .box border is no more visible. I'm trying to do that by setting margin-bottom: -1px but doesn't work.
Please see attached image:
Here's what I'm trying:
HTML:
<div class="box">
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</div>
CSS:
.box{
border-bottom: 1px solid blue;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
background: green;
border: 1px solid red;
}
Demo:
http://jsfiddle.net/b9H2j/

Answer 1

Problem
You basically want the li to overflow its .box parent, but .box is set with overflow:hidden;.
Solution
A possible solution can be to first set the li with position:relative; and then make it overflow with bottom:-1px;. Then remove overflow:hidden; from the .box container and find an alternative way to overcome the clear bug.
For example:
.box {
display:table; /* overcome the clear bug */
width:100%;
border-bottom: 1px solid blue;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position:relative;
bottom:-1px;
float: left;
background: green;
border: 1px solid red;
}
See jsFiddle demo

Answer 2

Have you considered changing your HTML structure? It seems somewhat to me "unnatural" to do what you're trying to achieve with your current HTMl. Anyhow, here's another solution. It requires you to set a height for your list items though.
You could do something like this:
HTML
<div class="box">
<ul>
<li class="left">Hello</li>
<li class="left">World</li>
<li class="add-bottom-border">something</li>
</ul>
</div>
CSS
.box{
display:table; /* overcome the clear bug */
width:100%;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
height:20px;
background: green;
border: 1px solid red;
}
.add-bottom-border {
overflow:auto;
border-bottom: 1px solid blue;
}
.left {
float:left;
}
JSfiddle
There's en explanation of the reasoning behind overflow:auto; here.