Trouble with css floating - css

Question

I have a little problem with floating.
I need to display my links side by side with 20px margin, but it does not work.
CSS
ul li{
float:left;
display: inline-block;
position:relative;
padding:0 20px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow: hidden;
padding: 2px 0;
position: absolute;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
}
.link span {
position: inherit;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link a:hover{
color:#fb6f5e;
}
.link:hover span {
overflow:hidden;
position: inherit;
bottom: 1px;
left:100%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}
HTML
<ul>
<li><div class="link">Start<span></span></div></li>
<li><div class="link">About<span></span></div></li>
<li><div class="link">Other<span></span></div></li>
<li><div class="link">Contact<span></span></div></li>
</ul>
http://jsfiddle.net/SD58Z/727/

Answer 1

This should do the trick:
Demo
Your link was set to position absolute so it was outside the flow of elements. Meaning all elements ended on top of each other.
You were also having some unclosed div tags and other html errors.
I moved some things around in the html to make it work. I do think this can be optimized. The reason why the underline hover effect did not work was because of my changes in the html structure (which I think is what you intended in the first place).
css
ul{
padding-left:0px;
}
ul li{
float:left;
display: block;
margin-left:20px;
position:relative;
color:inherit;
}
ul li:first-child{
margin-left:0px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow:hidden;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
position:relative;
overflow:hidden;
}
.link a:hover{
color:#fb6f5e;
}
.link span {
position: absolute;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link:hover span {
bottom: 1px;
left:0%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}
Html:
<ul>
<li>
<div class="link">
<a href="#">Start
<span></span>
</a>
</div>
</li>
<li>
<div class="link">
<a href="#">About
<span></span>
</a>
</div>
</li>
<li>
<div class="link">
<a href="#">Other
<span></span>
</a>
</div>
</li>
<li>
<div class="link">
<a href="#">Contact
<span></span>
</a>
</div>
</li>
</ul>

Answer 2

You have a ton of syntax issues
extra </div> tags
Improper tag order: <a><div></a></div> should be <a><div></div></a>
Incorrect Hex code for background color on <span> in CSS
You are trying to float items and also absolute position them. Pick one or the other.
Using this CSS (i deleted 2 lines of code) it works fine.
JSFIDDLE: http://jsfiddle.net/SD58Z/725/
ul li{
float:left;
display: inline-block;
padding:0 20px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow: hidden;
padding: 2px 0;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
}
.link span {
position: inherit;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link a:hover{
color:#fb6f5e;
}
.link:hover span {
overflow:hidden;
position: inherit;
bottom: 1px;
left:100%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}
With your HTML fixed: http://jsfiddle.net/SD58Z/732/

Answer 3

I just played with your code for a minute and fixed the HTML. There seems to be some useless CSS but this gets you going.
HTML
<ul class="nav">
<li><div class="link">Start<span></span></div></li>
<li><div class="link">About<span></span></div></li>
<li><div class="link">Other<span></span></div></li>
<li><div class="link">Contact<span></span></div></li>
</ul>
CSS
#nav {
width: 100%;
display: block;
}
ul li{
float:left;
display: inline-block;
padding:0 20px;
}
.link {
font-family: Tahoma;
font-size:18px;
overflow: hidden;
padding: 2px 0;
cursor:pointer;
}
.link a{
text-decoration:none;
color:gray;
-webkit-transition: color 0.4s ease;
}
.link span {
position: inherit;
left:-100%;
bottom: 1px;
height: 1px;
width:100%;
background: #fb6f5e;
-webkit-transition:all 0.4s;
}
.link a:hover{
color:#fb6f5e;
}
.link:hover span {
overflow:hidden;
position: inherit;
bottom: 1px;
left:100%;
height: 1px;
width:100%;
background: #fb6f5ee;
-webkit-transition:all 0.4s;
}