Trouble with css floating

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><a href="#"><div class="link">Start</a><span></span></div></li>
<li><a href="#"><div class="link">About</a><span></span></div></li>
<li><a href="#"><div class="link">Other</a><span></span></div></li>
<li><a href="#"><div class="link">Contact</a><span></span></div></li>
</ul>

http://jsfiddle.net/SD58Z/727/

To begin with, your HTML is invalid. – j08691 Mar 27 '13 at 17:17 — j08691, Mar 27 '13 at 17:17

Peter Rasmussen · Answer 1 · 2013-03-27T17:37:04.327

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>

Yes, but animation don't work with text-decoration, so for this reason I did it differently — Lukas, Mar 27 '13 at 17:32
I see that now. You need to modify how your selectors work once you fix your HTML. He fixed your HTML for you partially, which made it not work correctly. — Michael, Mar 27 '13 at 17:34

Michael · Accepted Answer · 2013-03-27T17:32:22.717

0

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/

edited Mar 27 '13 at 17:32

answered Mar 27 '13 at 17:21

Michael

7,016
2
28
41

It works fine look at my Fiddle. You need to delete all of your position: lines. – Michael Mar 27 '13 at 17:26
Again... Invalid markup with this example. You are now missing an ending div tag. – Michael Mar 27 '13 at 17:39
http://jsfiddle.net/SD58Z/768/ Position: inheret in the spans means they are position absolute of whatever they are contained within... Set their container to relative and the spans to absolute, and wallaa, it works. No need to go so far up the tree. See fiddle linked above. – Michael Mar 27 '13 at 19:01
Thank you so much. I struggled with this. I need to learn everything about css/html. – Lukas Mar 27 '13 at 19:08
You have to be careful with position: absolute because as you have found out, it can destroy stuff =) – Michael Mar 27 '13 at 19:13

score 0 · Answer 3 · answered Mar 27 '13 at 17:25

0

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"><a href="#">Start</a><span></span></div></li>
    <li><div class="link"><a href="#">About</a><span></span></div></li>
    <li><div class="link"><a href="#">Other</a><span></span></div></li>
    <li><div class="link"><a href="#">Contact</a><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;

}

answered Mar 27 '13 at 17:25

Jeremy

1,878
2
30
54

This is still invalid HTML mark up. You can not start an A tag then start a div tag and then end the A tag without first ending the div tag. – Michael Mar 27 '13 at 17:27
Your HTML is invalid again, thats the only reason what you are doing is working in the first place, you are targeting markup that is wrong. In the example above you are again, missing your tag....... – Michael Mar 27 '13 at 17:36
Lukas, Michael is correct. You are putting the tags in the wrong order. Put the div first, then the a and close the a then the span then close the span then close the div. – Jeremy Mar 27 '13 at 17:43
Right, I corrected it, but I don't know how to group a line class to get back my animation hover – Lukas Mar 27 '13 at 17:48
So now you're not using the UL? That way will work too. Just add a margin: 0 10px to .menu – Jeremy Mar 28 '13 at 17:55

Trouble with css floating

CSS

HTML

3 Answers3