As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch.
If anyone could provide me with a starting point, I would be very grateful. Thank you.
Feel free to test it out by clicking on the DEMO link above.
.clr{clear: both;}
div{text-align: center;}
.divA{background-color: #f0d5da;height: 87px;}
.divB{background-color: #c6e3a8;height: 50px;}
.divC1{background-color: #f33e47;min-height: 200px;width: 50%;float: left;}
.midcontainer{padding-bottom: 40px;}
.divC2{background-color: #fc575f;min-height: 200px;width: 50%;float: right;}
.divD{background-color: #f0d5da;height: 40px;position: fixed;bottom:0;width: 100%;}
Here's how you can structure your HTML code:
<div class="divA">
DIV A
</div>
<div class="divB">
DIV B
</div>
<div class="midcontainer">
<div class="divC1">DIV C1</div>
<div class="divC2">DIV C2</div>
<div class="clr"></div>
</div>
<div class="divD">DIV D</div>
To achieve the desired layout, ensure your headers and footers are fixed in position and add appropriate margins to the inner columns as indicated by your mockup.
If you want faux equal heights, enclose the inner columns and apply a background color.
You might want to consider utilizing table CSS and classes or exploring JavaScript solutions for additional customization options.
* {
margin: 0px;
padding: 0px;
}
.header, .subhead {
background-color: #f2d5da;
height: 50px;
position: fixed;
width: 100%;
}
.subhead {
background-color: #c3e3ac;
top: 50px;
}
.container {
background-color: #ff535e;
min-height: 100vh;
}
.column1, .column2 {
width: 50%;
float: left;
margin-top: 100px;
margin-bottom: 50px;
}
.footer {
background-color: #f2d5da;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}<div class="header">
A
</div>
<div class="subhead">
B
</div>
<div class="container">
<div class="column1">
C1
<p>Umami synth Neutra, cardigan seitan squid slow-carb wolf mumblecore Godard paleo bespoke brunch pop-up. Asymmetrical skateboard banjo beard brunch. Drinking vinegar shabby chic next level American Apparel raw denim Truffaut Godard occupy. Wolf PBR&B VHS, Kickstarter selfies pug Brooklyn mlkshk lomo seitan distillery chambray Tonx. Vegan keffiyeh slow-carb cornhole. Etsy artisan drinking vinegar Brooklyn roof party. 3 wolf moon butcher single-origin coffee church-key Pinterest typewriter Wes Anderson.</p>
</div>
<div class="column2">
C2
<p>Umami synth Neutra, cardigan seitan squid slow-carb wolf mumblecore Godard paleo bespoke brunch pop-up. Asymmetrical skateboard banjo beard brunch. Drinking vinegar shabby chic next level American Apparel raw denim Truffaut Godard occupy. Wolf PBR&B VHS, Kickstarter selfies pug Brooklyn mlkshk lomo seitan distillery chambray Tonx. Vegan keffiyeh slow-carb cornhole. Etsy artisan drinking vinegar Brooklyn roof party. 3 wolf moon butcher single-origin coffee church-key Pinterest typewriter Wes Anderson.</p>
<p>Umami synth Neutra, cardigan seitan squid slow-carb wolf mumblecore Godard paleo bespoke brunch pop-up. Asymmetrical skateboard banjo beard brunch. Drinking vinegar shabby chic next level American Apparel raw denim Truffaut Godard occupy. Wolf PBR&B VHS, Kickstarter selfies pug Brooklyn mlkshk lomo seitan distillery chambray Tonx. Vegan keffiyeh slow-carb cornhole. Etsy artisan drinking vinegar Brooklyn roof party. 3 wolf moon butcher single-origin coffee church-key Pinterest typewriter Wes Anderson.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="footer">
D
</div>Here is a suggestion:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<body>
<div id="A" style="
height: 100px;
top:0px;
left:0px;
right:0px;
background: lavenderblush;
position: absolute;
"><p>DIV A</p></div>
<div id="B" style="
height: 50px;
background: lightgreen;
top:100px;
left:0px;
right:0px;
position: absolute;
"><p>DIV B</p></div>
<div id="C1" style="
top:150px;
left:0px;
bottom:50px;
width: 50%;
background: lightcoral;
position: absolute;
">
<div id="content_c1" style="
overflow:auto;
width: 100%;
height: 100%;
background: lightyellow;
opacity: .5;
border-width: 1px;
border-style: solid;
">
<p>DIV C1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula sollicitudin leo ut congue.</p><p>Nulla hendrerit velit nec sapien euismod, vel tincidunt ligula consequat.</p><p>Fusce ultricies accumsan erat at tempor. Morbi varius mattis lectus, eget laoreet felis fermentum id.</p><p>Duis non purus sed justo rutrum malesuada vel in eros.</p>
</div>
</div>
<div id="C2" style="
top:150px;
right:0px;
bottom:50px;
width: 50%;
background: lightcoral;
position: absolute;
">
<div id="content_c1" style="
overflow:auto;
width: 100%;
height: 100%;
background: lightyellow;
opacity: .5;
border-width: 1px;
border-style: solid;
">
<p>DIV C2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula sollicitudin leo ut congue.</p><p>Nulla hendrerit velit nec sapien euismod, vel tincidunt ligula consequat.</p><p>Fusce ultricies accumsan erat at tempor. Morbi varius mattis lectus, eget laoreet felis fermentum id.</p><p>Duis non purus sed justo rutrum malesuada vel in eros.</p>
</div>
</div>
<div id="D" style="
height: 50px;
background: lavenderblush;
bottom:0px;
left:0px;
right:0px;
width: 100%;
position:absolute;
"><p>DIV D</p></div>
</body>
</html>If you utilize this code, make sure to click "Full page" as well.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...
After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...
I am currently developing a website that includes a feature displaying total hours worked by an employee. I am looking to enhance this function by also showing the hours worked for each day in a month. I have successfully created a chart for this purpose, ...
As I delve into the realm of CSS, my current mission is to replicate the captivating cards showcased on this particular website. Utilizing Font Awesome icons has become a pivotal aspect of this endeavor. For instance, let's take a look at this card:ht ...
I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...
I've been looking at this snippet: The sidebar division is what I'm focusing on right now. I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrollin ...
Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...
I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...
I have successfully created a pair of HTML files - index.html & contact.html. Within these files, I have implemented a navigation bar that allows for seamless transition between them. Recently, I delved into the realm of retrieving APIs and crafted an app ...
My table has cells that can contain both icons and text, with the icons appearing to the left of the text. There are different alignment scenarios to consider: Only an icon is present: The icon should be centered Only text is present: The text should be ...
I'm using Bootstrap for my form control, but my input and button are not on the same line. <div class="form-group"> <label class="col-lg-3 control-label" id="title-meaning">Meaning:</label> <div c ...
I need help with a form that has two inputs: The first input allows the user to enter an amount, such as 1000. The second input is read-only and should display the value of the first input plus 1%. For example, if the user types in 1000 in the first fie ...
Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...
Could really use some assistance in solving this problem as I am completely stumped. I've noticed an issue on one of my websites when pages are reloaded. Every now and then (not consistently, which adds to the confusion), upon refreshing a page, it ...
A different query was raised regarding the same issue (refer to the mentioned question) for Bootstrap 3, however, the suggested solutions are not compatible with Bootstrap 4. The illustration in this post effectively conveys what I am aiming for. Take a ...
I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...
I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...
Below is the code I am working with: <div style='display: table'> <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div> </div> I'm ...
My website features a tabbed menu that displays content from various WordPress categories including Cars, Trucks, and Buses. The active tab is randomly selected each time the page is reloaded. However, there seems to be an issue with the "View More" button ...
I have 2 HTML documents index.html and services.html In services.html, I have the following code: <a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a> <a class="nav-link" data-bs- ...