A layout featuring two columns that have heights which are fixed to the bottom of the footer

I've designed a simple layout featuring 2 columns and a footer that adjusts based on the height of the longer column.

<div id="holder">
    <nav class="navbar navbar-default navbar-fixed-top"></nav>

    <div class="container">
        <div class="row">
            <div class="left col-md-8">
                Expands with content
            </div>
            <div class="right col-md-4">
                Expands with content
            </div>
        </div>
    </div>

    <div class="footer">
        Adaptable behavior based on the content length of either column. Stays at the bottom when content is short. 
    </div>

See the complete code with CSS: http://jsfiddle.net/TNRqL/

What's a smart way to ensure that both columns have the same height and also align with the footer?

Check out this example: http://jsfiddle.net/xJ6Cv/ (I used min-height on left and right columns)

I came across a solution in another post to equalize the height of columns, regardless of their content length, but it doesn't keep them aligned with the footer.

.row {
    overflow: hidden;
}

[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Answer №1

If you are comfortable with approximately 80% browser support, you can achieve a stylish layout using the Flexbox CSS3 module. By setting a minimum height for the overall page and making your columns flexible to fill the available space, you can create a modern design. Check out a demo here, although the complexity may increase due to the nesting of your elements.

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

Customizing the hover behavior of a div element without causing displacement of surrounding elements

I am facing an issue where the descriptions in my list of 100 items are longer than the width of the div, causing the text to be cut off. I want to display the full description on hover without affecting the layout of other items. Currently, when I hover o ...

CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up? Thank you. I have created a basic fiddle - resize the window to see them inline. JSFiddle div.gallery { border: ...

Overflow of Div Content

I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...

Can someone please explain how to apply various fonts to the text in a `<p>` paragraph using CSS and HTML?

Take a look at this image Can you provide guidance on how to incorporate various fonts within a paragraph, like the example shown in the image above? I am experimenting with the "Creative Corner" section. ...

Having difficulty adjusting the width of the CSS menu bar to fit the entire page

I found a useful CSS menu tutorial online that seems to work well, but unfortunately, it doesn't stretch the full width of the page. You can check out the tutorial here: Even after trying to set the width to 100%, the menu still falls short of extend ...

Incorporate a CSS style element to a hyperlink button in JQuery Mobile

I am trying to apply a style to a link button element using JQuery. The code I have written is not working. Can anyone provide suggestions on how to achieve this? Below is the snippet of the HTML <div data-role="content"> <a href="#" class= ...

Tips for aligning a div containing an image in the center of another div

Trying to perfectly center an image inside a div both vertically and horizontally using the display inline-block property. HTML <div class="center-wrapper"> <div class="image-holder"> <img src="picture.jpeg" alt="Centered Image"> ...

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

I recently started learning JS, Jquery, and CSS. My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges. To address this issue, I decided to star ...

Simple code in HTML and CSS to assign unique colors to individual characters of the text

What's the best way to assign a unique color to each character in a long text on an HTML page while keeping the file size of the generated HTML as small as possible? The goal is to use minimal color formatting tags. Any suggestions on how to achieve t ...

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

Editing the dimensions of the input in Bootstrap 4

Is there a way to adjust the width of the input and select elements? I want the input element to take up more space while the select element occupies less space. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel=" ...

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

How can I integrate material-ui with react-jsonschema-form?

Currently, I am working on a form utilizing react-jsonschema-form. However, I would like to further enhance the appearance of my application (including the form) by incorporating Material-UI. I am encountering difficulties integrating both frameworks toget ...

Utilizing external Cascading Style Sheets in AngularJS 1

Can an external CSS be applied to a component in AngularJS1? If yes, then how can it be done? I have only seen examples of applying inline css... ...

What is the best way to align the middle element of a flex row in the center?

Desired Outcome: I have three elements within a container styled with display: flex. My goal is to align the left item to the left, the right item to the right, and have the middle item centered. space-between does not achieve this look due to the varyin ...

Display a single image on the tablet and a distinct image on the computer

Currently, I am encountering an issue with my webpage located at . The problem lies in the right upper corner where a ribbon is located. However, when viewing the page on a tablet, the ribbon overlaps with my menu. To resolve this, I thought about displa ...

How can I ensure the end of the list is clearly visible?

I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the l ...

Issue with background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

Adding dashes as padding in HTML/CSS

I am currently working on updating the user management block on my website and I want to showcase it with some visual examples. I believe that using images is the most effective way to demonstrate changes. This is the current appearance of the block: ...