How to Vertically Fill a Div Using 960 Grid System and CSS

Struggling with CSS challenges is not uncommon on the vast landscape of the internet. One particular hurdle revolves around making purple and green divs expand to fill their remaining space, lining up perfectly with the yellow twitter feed:

http://example.com/csschallenge

The Structure:

<div id="main">
        <div id="primary" class="home">
            ... 
            (HTML structure details continue)
            ...
        </div>
    </div>

The Styling:

.home #main-content {
        margin-top: 23px;
        ...
        (CSS styling details continue)
        ...
    }
    
    /* Home Info */
    .home #info {
        width: 270px;
        padding-right: 30px;
        ...
    }

    /* Home Twitter */
    .home #twitter {
        padding-left: 10px;
        width: 290px;
        background: yellow;
    }

    /* Home Col3 */
    .home #col3 {
        background: green;
    }

    /* Implementing 960.gs framework */

Your assistance would be greatly appreciated.

csshtml960.gs

Answer №1

Check out my innovative approach that successfully resolved the issue:

.homepage #content-wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
    overflow: hidden;
}

.homepage #content-wrapper section {
    padding-bottom: 8888px;
    margin-bottom: -8888px;
}

Answer №2

If you want to make it simple, jquery can help accomplish that easily. Check out this demo for reference: http://jsfiddle.net/Bushwazi/tuKEJ/

$('#main-content > div').height($('#main-content').height());

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

What is the best way to rearrange the order of divs when the screen is being resized?

My task involves rendering a page with react-bootstrap on desktop, structured like this: <Row> <Col xs={12} md={8} className="a"> </Col> <Col xs={6} md={4} className="b"> </Col> <Col xs={6} md={4} className ...

htmlcssreactjs

The class "slick" in <col class="slick"> does not add any styling or effects

My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for ...

htmlcsshtml-tablecol

Forwarding based on URL/Query Parameters

I'm looking to create a redirect for users based on URL or query parameters, but I'm not sure how to go about it. For example, if the URL is https://www.tamoghnak.tk/redirect?link=https://www.tamoghnak.tk/gobob, I want to redirect to /gobob. If ...

javascripthtmlnode.jsurl-parametersquery-string

Troubleshooting: jQuery click event not functioning correctly with if-else statement

For some reason, I can't seem to figure out how to toggle the color of all list items with a class of "link" between blue and black. I've searched through numerous posts but still can't find a solution. Working Example: http://jsfiddle.net/ ...

jqueryhtmlif-statement

Tips for transferring the content of a variable to a handlebars block

Currently, I am grappling with HTML code that involves handlebars templates to store internal variables. While I may not be an expert in handlebars, I am trying my best to navigate through it. The crux of my issue lies in the need to access a lengthy list ...

javascripthtmlhandlebars.js

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Bootstrap 4.1 Is there a way to get rid of the blue border on a checkbox that shows up when it is in focus? https://i.sstatic.net/e77BV.png I attempted to use outline, but it didn't work as I had hoped. This is the code I have been using: <div ...

csstwitter-bootstrapbootstrap-4

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

cssnode.jsreactjssassnode-sass

Navigating through various folders to access files in HTML

I am facing an issue with my folder structure and includes in my PHP files: index.php includes/header.php includes/conn.php contents/ad_list.php contents/ad_posting.php In my index.php, I successfully included includes/header.php. However, in contents/a ...

phphtml

The button is not activating the callback function when clicked. It is unclear why this is happening as no errors are being displayed in the console

Utilizing an event listener on the button element, the user is prompted to select a language first. Upon selection, the button in question is presented to them. Clicking on this button triggers a callback function that allows the user to begin the quiz. Ev ...

javascripthtmlcssbuttoncallback

Display tooltip upon hovering

Can someone help me with my dot navigation tooltips? I've managed to make them visible, but now I want them to only appear on hover. What am I missing? I've experimented with display: none and visibility but when I tried this code: span.tooltip ...

htmlcss

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

Recently delving into jquery, I attempted to dynamically add an input field to a parent div on button click, but encountered some difficulties. Specifically, my goal was to insert a div with an input element into the parent div identified by the id "join ...

jqueryhtml

Changes in Grid Width are determined by Browser Zoom levels

I created my own grid system that was working perfectly... until now. The screenshots I've attached show how Chrome is changing my fixed borders and content sizes to strange floating values. Can anyone explain why this is happening or suggest ways to ...

htmlgoogle-chromezooming

How can I change it so that clicking on the YouTube icon directs me to www.google.com?

I have a YouTube icon on my website and I want it to redirect me to Google.com when clicked. However, it is not working as intended. I am trying to implement this functionality using JavaScript. HTML <div class="yt" > <i class=" ...

javascripthtmljquery

Retrieving table information using javascript

My goal is to retrieve information from the <td> elements within the following HTML table: <table class="datadisplaytable" summary="This table lists the scheduled meeting times and assigned instructors for this class.."> <caption class="cap ...

javascripthtml

Using onclick events, manipulating innerHTML, and dynamically generating tables

Below is the code snippet: window.onload=function(e){ //Created by Firestar001 var X; var Y; var board=""; var rizzalt=document.getElementById("rezzalt"); var letters = new Array; letters = ["A","B","C","D","E","F","G","H","I","J"]; for(a=0; a<=9 ...

javascripthtml

Show MySQL SELECT output on a HTML page

I have created a button that opens a new .html page in a new browser tab, allowing users to input data that is then stored in a MySQL database using a PHP script. Now, I am looking for a way to display the content of my MySQL database on my index.html fil ...

phphtmlmysql

`The opacity of parent elements does not apply to their child elements`

I have been searching extensively and cannot seem to pinpoint the problem. I am trying to adjust the opacity of the parent element, but for some reason, the child elements are not reflecting this change. My attempts at finding guidance through online sear ...

htmlcssopacity

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

Tips and insights on developing a personalized theme selector for Django: brainstorming and recommendations

As I continue to enhance my Django website, I am seeking advice on incorporating graphic charts and how to integrate them with Django. During the development of my software, I implemented a graphic chart that aligns with my company's colors (blue and ...

jquerypythoncssdjango

Validation of HTML5 forms using jQuery

I am in need of a jQuery-based validation library that will kick in when the browser does not support HTML5 for specific attributes like 'required' or 'placeholder'. After looking around, I have come across several libraries but they ar ...

javascriptjqueryvalidationhtml