Ensuring the bottom border of an element extends to the edge of the screen when utilizing a 960 grid in HTML/CSS

I am currently working on creating a website layout using the 960 grid system developed by Nathansmith. I am facing an issue in extending the bottom border of an element to reach till the end of the screen while keeping the element inside a container div.

To better understand my problem, please refer to the image provided for a visual explanation. You can view a larger version of the image here.

In the first image, you can see that the element has a fixed width, while in the second image, the border extends to the edge of the screen. How can I achieve the result shown in the second image?

Just a note, there is usually a logo image floated to the right before the menu section.

Any help or suggestions would be greatly appreciated. Thank you in advance!

htmlcsspush960.gs

Answer №1

If you're looking for a straightforward solution, check out this link: http://example.com/simplehtmlcode

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

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

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

</head>
<body>
<div class="container">
    <ul class="navlist">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
        <li><a href="">Item 6</a></li>
    </ul>
</div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Python and Django to Populate Form Fields in a Model with values from an Imported JSON dataset

I am facing a challenge where I have a model form that stores all user inputs from form fields into the database as one entry. Additionally, I possess a JSON file with numerous JSON objects whose attributes correspond to the form field of the model. This ...

pythonhtmljsondjango

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

javascriptandroidjqueryhtmljquery-mobile

"The JQuery .validate method is not compatible with this property or method" - error message displayed

I seem to be facing a problem that I can't seem to solve. I keep getting an error message that says "Object doesn't support this property or method" while using jquery-1.10.4. The .validate method is not functioning properly for me. Any assistanc ...

javascriptphpjqueryhtml

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

javascripthtml

Displaying Bootstrap 5 Cards in a Vertical Layout

My webpage currently displays a row of cards horizontally, but I would like them to align vertically on smaller screens. Currently, when the screen is shrunk, the cards go off the page instead of stacking vertically. I still want the cards to have equal sp ...

htmlbootstrap-5bootstrap-cards

Using the "export default" feature in React.js is a

Is it possible to name an exported function as "default" without encountering an error? export default() => { const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); useEffect(() => { setTimeout(() => { setWidth(window.i ...

javascripthtmlreactjs

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

htmlspringbootstrap-4freemarker

Styling Rules for WebKit Browsers

Is there a method to apply a particular CSS style for a div based on whether the user is accessing the page from a Chrome browser on a Desktop or an Android device? .myDIV{ [if CHROME???] width: 280px; [if ANDROID???] width: 100%; } Seeking guidance on ...

androidcssgoogle-chrome

obtain the text content from HTML response in Node.js

In my current situation, I am facing a challenge in extracting the values from the given HTML text and storing them in separate variables. I have experimented with Cheerio library, but unfortunately, it did not yield the desired results. The provided HTML ...

javascripthtmlnode.jsparsingweb-scraping

What is the best method for retrieving text from elements designated by class?

I am currently using BeautifulSoup to scrape data from a website, but I am facing an issue with extracting only the text I need. The specific part of the website data that I want to grab is: <div content-43 class="item-name">This is the te ...

pythonhtmlweb-scrapingbeautifulsoup

Ways to stop custom Mailchimp form from redirecting upon submission

I have integrated a custom Mailchimp signup form into a webpage I am developing. The form works well, but I would prefer to avoid the automatic redirect to a new tab upon submission, which displays a confirmation message from Mailchimp about joining the ma ...

jqueryhtmlajaxformsmailchimp

How to create a clickable link that functions as a file upload button

I am working on a project where I need to create a link that acts as a file input when clicked. Here is the code for the link: <a id="upload-file">Upload your photo</a> Is there a way to make this link function as a browse file input? Any ...

javascriptjqueryhtmlcss

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

javascripthtml

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...

javascriptjquerycsswordpress

Assistance required in filling out a table solely through JavaScript with input from an HTML form

Hello, I am currently pursuing a second career and have just started learning HTML & JavaScript. For a simple assignment, I need to take user input in the form of numShares and numYears through HTML. My goal is to use JavaScript to populate a 3-column tabl ...

javascripthtml

What is the best way to eliminate the input border?

click here for image I'm currently working on designing a straightforward login page. However, I've noticed that there are black borders around the input fields. Can anyone help with how to remove these borders? ...

htmlcss

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

"Showcasing a pair of icons side by side in an HTML layout

I need assistance with formatting two legends on the form. I want both legends to be displayed side by side instead of one on top of the other. Here's how I want it: -----legendOne---LegendTwo----- What CSS code do I use to achieve this layout? Be ...

htmlforms

Using JavaScript, you can add an article and section to your webpage

Currently, I am utilizing AJAX to showcase posts. My objective is to extract each property from a JSON object that is returned and generate an <article> for the title followed by a subsequent <section> for the content. While I can successfully ...

javascripthtmlajaxjson

Harness the power of a NUXT component on a different website

Currently, I have a fully functional NUXT application that consists of numerous pages and components operating in `universal` mode. My challenge now is to render one of these components on a separate static HTML website. Exporting a component from a stand ...

javascripthtmlvue.jsvue-componentnuxt.js