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

StackOverflow https://stackoverflow.com/questions/16848230

  •  30-05-2022
  •  | 
  •  

Question

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.

Was it helpful?

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top