Search code examples
htmlcsspush960.gs

HTML/CSS Pushing element's bottom border till the end of screen, if using 960 grid

I just started making website layout using 960 grid system made by nathansmith and can't figure out how to push the element's bottom border till the end of screen, while keeping the element within container div.

Please see the image for visual explanation. Here is bigger image version. How can I archieve the 2nd result?

1st img you can see that it has its normal fixed width and 2nd the border is pushed to the edge. How can I archieve the 2nd result?

P.S. Before menu there normally is logo image floated to the right;

Thank you in advance.

Solution

  • Here's a simple way to do that: http://codepen.io/pageaffairs/pen/mvjxc

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body, ul, li {margin: 0; padding: 0;}
.wrap {width: 900px; margin: 0 auto; background: #e7e7e7; min-height: 600px;}
.menu {list-style: none; float: right; position: relative;}
.menu li {float: left; margin-left: 20px;}
.menu li:first-child {margin-left: 0;}
.menu li a {text-decoration: none; display: block; line-height: 2em; text-transform: uppercase;}
.menu li a:hover {text-decoration: underline;}

.menu:after {
    content: "";
    height:0;
    width: 9999px;
    border-bottom: 1px solid #ccc;
    position: absolute;
    left: 0;
    bottom: 0;
}
</style>

</head>
<body>
<div class="wrap">
    <ul class="menu">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
        <li><a href="">Link 6</a></li>
    </ul>
</div>
</body>
</html>