CODEWITHSUNDEEP
csspositioningfixed
Eoin Murphy
Eoin Murphy

Reputation: 45

How to work with fixed positioning in CSS?

I'm trying to make a fixed vertical navigation on the left hand side of my website.

But, whenever I give it the position: fixed; and then position it using margins, it cancels out any links I have on the information in the <nav> tags.

Has anyone got any ideas on how to change this?

Upvotes: 1

Views: 129

Answers (2)

Emad Rahnama
Emad Rahnama

Reputation: 1238

Is this post useful to you?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Position</title>

<style type="text/css">
#nav{
    position:fixed;
    background-color:#EFEFEF;
    width:200px;

    left:0;
    top:0;
}
#main{
    width:900px;
    margin:0 auto;
    background-color:#0CF;
    height:3000px;
}
</style>

</head>

<body>


    <div id="nav">
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
        </ul>
    </div>


    <div id="main">
    </div>


</body>
</html>

Upvotes: 0

medhatdawoud
medhatdawoud

Reputation: 1188

the solution is in positioning using left and top properties not margins :)

#mydiv{
  position:fixed;
  top:100px;
  left:0px;
}

Upvotes: 1

Related Questions