开发者

Fixed div vertically and right aligned to another div

开发者 https://www.devze.com 2023-03-16 13:46 出处:网络
The nav div must be fixed vertically and sitting to the right side of container div. Using position:fixed; and setting values left and top, you get the div to stay 开发者_开发技巧in the same place,

The nav div must be fixed vertically and sitting to the right side of container div.

Using position:fixed; and setting values left and top, you get the div to stay 开发者_开发技巧in the same place, but the left value depends since the parent div (page-container) gets centered.

<html>
<body>
<div id="page-container" style="width: 700px; height:1000px; margin-left: auto; margin-right: auto;background-color:moccasin;"> 

    <div class="content" style=" width: 340px; height:300px; float:left;background-color:mediumseagreen;"> 
        .content
    </div>

    <div class="nav" style="float:left;height: auto; width: 300px; display: block;background-color:lightblue;"> 
        .nav <br><br>This div must:<br> 
     1. be fixed vertically (if scrolling down, you should see me in the same place) <br>
     2. be aligned to the right side of <b>content</b>
    </div>
</div>
</body>
</html>

Fixed div vertically and right aligned to another div


See: http://jsbin.com/afenip/2

/* new css */
.nav {
    position: fixed;
    margin-left: 340px; /* same as the width on .content */
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号