Building a stack of DIVs, some with fixed heights and others without, potentially using only CSS

Hello everyone! I am having trouble deciding on the best approach to achieve a layout like the one below:

+------------------------------------------------------------+

| div 0 , varying height

+------------------------------------------------------------+

| div 1 , varying height

+------------------------------------------------------------+

| div 2 , varying height

+------------------------------------------------------------+

| div 3 , fixed height

+------------------------------------------------------------+

| div 4, varying height but needing to be scrollable (contains a table that should be scrolled through)

+------------------------------------------------------------+

| div 5 , fixed height, positioned at the bottom and always visible!

+------------------------------------------------------------+

I have attempted using both display: table/table-row and various absolute/relative positioning solutions, but I have not been successful!

EDIT: It would also be beneficial if the same functionality could be achieved by wrapping div3, div4, and div5 in another div.

EDIT2: This is my current solution using display:table JSFiddle Link

However, is it possible to make div#cont scrollable?

Thank you

csshtmllayoutfixed

Answer №1

Is this similar to what you're looking for?

http://jsfiddle.net/46fud/

HTML

<div class='commonDiv'>variable height<br>variable height</div>
<div class='commonDiv'>variable height<br>variable height</div>
<div class='commonDiv'>variable height<br>variable height</div>
<div class='div1'>fixed height</div>
<div class='div2'>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br></div>    
<div class='div3'>fixed height at bottom</div>

CSS

.commonDiv{ float:left; width:100%; border:1px #000000 solid; }
.div1{float:left; height:50px; border:1px #000000 solid; width:100%;}
.div2{float:left; height:50px; overflow:scroll; border:1px #000000 solid; width:100%;}
.div3{position:fixed; bottom:0; height:50px; border:1px #000000 solid; width:100%;}

Answer №2

To ensure the div remains fixed at the bottom of the page, utilize the CSS guidelines below:

div5

.fixed_footer{ position:fixed; height:20px; (adjust value as needed) bottom:0; left:0; width:100%; }

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

Creating a dynamic drag-and-drop layout in React using react-grid-layout

Utilizing the react-grid-layout package for implementing drag-drop and resize components, I have successfully achieved the functionality outlined in the documentation. Description of My Issue My challenge lies in creating a dynamic UI where the layout is ...

javascripthtmlreactjsgrid-layoutreact-grid-layout

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

javascriptjqueryhtmlcss

Is it possible to insert clickable links within the content of a Twilio text message?

Currently, I am utilizing Twilio and Express to send programmable SMSs to the users of my web application. I'm curious if it's possible to include hyperlinks within the body of these text messages. Is there a method to achieve this? I have attem ...

javascripthtmlnode.jsexpresstwilio

Is it just me, or does `position: fixed;` not actually fix the element to the top?

I'm experiencing an issue where the element isn't fixed to the top of the page, despite using the position: fixed; property. I've tried several solutions including: Setting a z-index of 9999 Wrapping all elements in a single container (.fi ...

htmlcss

Vertical alignment issue with Primefaces ConfirmDialog after AJAX form update

One issue I am facing is with a form that expands using Ajax+Rendered when certain operations are clicked. The problem arises when my p:confirmDialog is not vertically centered as the form grows. It is perfectly centered when at its "normal size." I have ...

javahtmljsfprimefaces

Troubleshooting issue with ng-change function in AngularJS

I have been working on developing a web application that includes two dropdown lists. My goal is to update the data in dropdown list 2 whenever there is a change in dropdown list 1. <tr> <td> State </td> <td> ...

javascripthtmlangularjs

Do not open iframe links in a new window

Is it possible to manipulate the iframe so that links open inside the iframe window? I want the links clicked within the iframe to stay within the same window instead of opening in a new one. However, I have too many links to individually edit their code ...

javascripthtmliframe

The eval() function does not run scripts from external sources with a src attribute

Instead of using eval() to execute all <script> tags after completely rewriting a div, I have encountered an issue. The following code snippet works for inline-scripts, but it doesn't have the same effect on external scripts like: <script sr ...

javascriptjqueryajaxhtml

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...

htmlreactjstypescriptmaterial-ui

Is it possible to convert xaml to html in a silverlight newsletter?

Currently, I am working on a project that involves creating a webpage where my admin can send emails directly through the website. To achieve this functionality, I have implemented a code snippet to send emails to all subscribers. foreach (Subscription pe ...

c#htmlsilverlightemailxaml

The <div> tag fails to comply with the Display: inline CSS property

I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side b ...

htmlcssinlinedisplay

Resolving formatting challenges in R markdown with Blastula

Dealing with formatting problems while trying to include an R markdown file in an email body. As a CSS novice, I'm struggling to find a solution and it's becoming quite frustrating. The table has the following CSS styling: <!DOCTYPE html ...

cssremailmarkdownblastula

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

javascripthtml

Modify the specified pattern with regex only if it does not appear in a particular location in the content

Our tool development heavily relies on regex for various functionalities. One key aspect involves replacing placeholders with actual values dynamically using standard JavaScript's `RegExp`. All placeholder formats are similar to this: {{key}} In mo ...

javascripthtmlangularjsregex

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

javascriptjqueryhtml

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

javascriptcssvue.js

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

htmlcsscross-browser

Turn off the ability to cache an HTML file without using PHP

I am currently faced with the challenge of managing a rather outdated, small website stored on a web space that does not support PHP. To overcome this limitation, I have decided to use iframes to avoid having to manually implement the basic structure and m ...

phphtmlcaching