I have created a pen Here → https://codepen.io/codeispoetry/pen/NpKZpN but I am facing 2 challenges →
1 → You can see that the content in the right hand side aside is overlapping the footer. I tried to set height:auto to many elements but still that could not fix the issue.enter image description here
2 → I want that my menu items should be exactly in the middle of that top row.
Code Here →
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Responsive Two Column Layout (Left Column Fluid)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="max-width">
<header>
<div class="logo floating-inline">
<img src="https://s3.amazonaws.com/projectsts/generic/logo2.png" alt="">
</div><!-- logo -->
<nav class="floating-inline">
<ul class="nav inline-items">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>World</li>
</ul>
</nav>
</header>
<div class="post-title">
<h1>Responsive Two Column Layout Left Column → Fluid, Right Column → Adaptive.</h1>
</div> <!-- post-title -->
<div class="site-container">
<main class="left-column">
<h2>Left Column (fluid)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</main>
<aside class="right-column">
<h2>Right Column</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</aside>
</div>
<footer>
<p>Contact Us | FAQ | Privacy Policy</p>
<p>©2017 Copyright Text Here</p>
</footer>
</div>
</body>
</html>
CSS Here →
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; }
.max-width {max-width: 1400px; margin: 0 auto;}
.site-container, .post-title, footer, header { position: relative; margin: .5em; }
.left-column, .right-column,.post-title, footer, header { border: 1px solid #ccc; padding: 1.25em; }
.left-column { margin-bottom: .5em; }
.floating-inline{display: inline-block;vertical-align: middle;}
.nav {
list-style: none;
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
}
.nav > li,
.nav > li > a {
display: inline-block;
*display: inline;
zoom: 1;
text-decoration: none;
}
.inline-items {
margin-top: 0;
}
.inline-items li {
margin-left: 0;
border-left: 1px solid black;
padding-left: 10px;
padding-right: 10px;
}
.inline-items li:first-child {
margin-left: 0;
border: none;
padding-left: 0;
padding-right: 10px;
}
.inline-items li:last-child {
padding-right: 0;
}
/* MEDIA QUERIES */
#media screen and (min-width: 47.5em ) {
.left-column { margin-right: 19.5em; }
.right-column { position: absolute; top: 0; right: 0; width: 18.75em; }
}
Please guide me where I am going wrong.
solution to first problem
https://codepen.io/obedparla/pen/xqxBXW
Basically the issue is the way you're making the divs "float" next to each other. You are forcing them to stay in place by using absolute positioning. Absoulute positioned elements don't respect the boxes or spaces of other elements, they're on top of all of them.
.clear{
clear: both;
}
.left-column{
width: 70%;
float: left;
margin: 0;
}
.right-column{
width: 28%;
float: right;
}
I've added the following to your css, at the end, to override your current css. It sets the elements to float, and the corrects widths, giving the same effect but without your issue. This is the correct way of doing it. You can also check flex-box.
You'll also need to
<div class="clear"></div>
between the floating elements and the footer, to clean the floats (otherwise they'll overlap on the footer).
solution to second problem
Since you're using inline-blocks to align the logo and the text, you'd need to set the width of each of the elements.
The working pen is here: https://codepen.io/obedparla/pen/xqxBXW
The only thing I added was:
nav.floating-inline{
width: 70%;
}
ul.nav.inline-items{
text-align: center;
}
By giving a width to the floating inline elements (the nav) you can then use text-align center and they'll be centered in between those 70% width.
You can play around with this to achieve the exact result you want. Giving the logo a bigger width and such.
For the first issue, the content is not overlaping the footer your codepen. Could you submit a screenshot if that's still the case?
<nav class="floating-inline" style="width: 80%;text-align: center;">
I hope this helps :)
header{
height:100px;
}
nav{
float:left;
width:50%;
margin:20px auto;
}
.logo{
float: left;
width: 40%;
}
Related
I have a scenario in AEM which is on container level default AEM has the CSS of float: left which cannot be removed since the entire flow will be affected, but on the same div, I need to achieve max-width:1280px with center-aligned. The following code where the class container cannot be removed and I have to add an extra class for achieving it. The code I have tried so far.
Note: I cannot remove float property since its core component.
Any help will be appreciated !!
.custom-container{
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right:auto;
display: inline-block;
}
.container{
float: left;
clear: none;
width: 100%;
box-sizing: border-box;
}
<div class="container custom-container">
<div class="sub-value">
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
I don't know what you are allowed to change and what not but this may work:
<html>
<head>
<script>
function changeWidth(newWidth) {
document.getElementById("test").style.width = newWidth;
}
</script>
<style media="all">
.custom-container {
max-width: 100%; /* made it 100% */
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.container {
float: left;
clear: none;
width: 100%;
box-sizing: border-box;
}
.sub-value {
border: 1px solid red;
max-width: 1280px; /* restricted */
margin: 0 auto; /* centering */
}
</style>
</head>
<body>
<div class="container custom-container">
<div class="sub-value">
<p
>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p
>
<p
>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p
>
</div>
</div>
</body>
</html>
Use some math to calculate the margin manually
.custom-container {
border: 1px solid red;
max-width: 1280px;
margin: 0 max(0px, (100% - 1280px)/2);
display: inline-block;
}
.container {
float: left;
clear: none;
width: 100%;
box-sizing: border-box;
}
<div class="container custom-container">
<div class="sub-value">
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
You can try the following code of css as follows:
.custom-container {
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
display: block;
float: none !important;
}
Just copy paste
.custom-container{ border: 1px solid red; max-width: 1280px; margin: auto; tex-align: center; }
I'm creating an HTML page that needs line height, for that I'm using line-height CSS. Here is my code.
.heading{
font-size:2em;
font-weight:bold;
}
.body{
font-size:1.3em;
}
.container{
max-width:75%;
line-height:2;
}
<div class="container">
<div class="heading">
What is Lorem Ipsum?
</div>
<div class="body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
My issue here is, the line height is getting applied for text even, But I want the height to be preserved only for the tags. In my current sample, I've given only 2 divs, In reality, there may be p tags even. Please let me know how can I achieve this.
Instead of giving line height to div it is better to use margin or padding for spacing. Line height commonly used to set the distance between lines of text & if you still want line-height in div then code is provided below
.heading{
font-size:2em;
font-weight:bold;
}
.body{
font-size:1.3em;
}
.container{
max-width:75%;
}
.container .heading
{
line-height:2;
}
<div class="container">
<div class="heading">
What is Lorem Ipsum?
</div>
<div class="body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
You are probably looking for gaps:
.heading {
font-size: 2em;
font-weight: bold;
}
.body {
font-size: 1.3em;
}
.container {
max-width: 75%;
display:grid; /* make it grid container */
row-gap:2em; /* add gap */
}
<div class="container">
<div class="heading">
What is Lorem Ipsum?
</div>
<div class="body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
some content
</div>
</div>
I'm trying to build a calculator interface with HTML and CSS and I want the main div element always remain at the center of the screen even when I change the size of the screen, I want the element to have 80% width and 70% height and with minimum height of 280px and maximum width of 580px.
#main{
height: 70%;
width: 80%;
max-width:580px;
min-height:280px;
}
<div id="main">sth
<div>
I have tried many ways but none worked for me, many ways set the element at the center horizontally but not vertically.
You may try display: flex at top level element
Hope this helps, cheers!
#main {
display: flex;
flex-direction: row;
justify-content: center;
}
#calculator {
top: 50%;
position: absolute;
transform: translate(0,-50%);
text-align: center;
border: 1px solid #000000;
height: 70%;
width: 80%;
max-width:580px;
min-height:280px;
}
<div id="main">
<div id="calculator">sth</div>
</div>
Position #main div.
#main{
height: 70%;
width: 80%;
max-width: 580px;
min-height: 280px;
background: bisque;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div id="main">
My Calculator
</div>
#main{
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
.justify {
text-align:justify;
}
<div id="main" class="center">
<div class="justify">
<b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. so don't forget that, hope this help you
</div>
</div>
<p class="justify">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
In the following code, I need to create a box with header and footer with a specific height the central div should be at height 100%.
Currently if I am using flex on #card the heights for header and footer are shorter.
If I remove the flex css from #card it works as expected.
I am aware that removing the flex would solve my issue, but I am interested to know why it is happening and how I could fix it using still flex.
Thanks for your feedback.
#card {
width: 300px;
height: 400px;
background-color: grey;
display:flex;
flex-direction: column;
}
#header {
width: 100%;
height: 50px;
background-color: red;
}
#content {
width: 100%;
height: 100%;
background-color: yellow;
overflow:auto;
}
#footer {
width: 100%;
height: 100px;
background-color: blue;
}
<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
Remove the height:100% and use flex grow:1 and then change the heights to min-height (sometimes I like to use both min and max to ensure the height is fixed)
#card {
width: 300px;
height: 400px;
background-color: grey;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
min-height: 50px;
background-color: red;
}
#content {
width: 100%;
flex-grow:1
background-color: yellow;
overflow: auto;
}
#footer {
width: 100%;
min-height: 100px;
background-color: blue;
}
<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
Update - removing flex shrink per #Michael_B comment
#card {
width: 300px;
height: 400px;
background-color: grey;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
height: 50px;
flex-shrink: 0;
background-color: red;
}
#content {
width: 100%;
flex-grow:1
background-color: yellow;
overflow: auto;
}
#footer {
width: 100%;
height: 100px;
flex-shrink: 0;
background-color: blue;
}
<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
This is because of your height element on your header and footer tags.
This CSS would allow you to use the display: flex; without altering the header and footer height. 100% height works when the parent has a well defined height.
#card {
width: 300px;
height: 400px;
background-color: grey;
display: flex;
flex-direction: column;
}
#header {
width: 100%;
max-height: 50px;
height: 100%;
background-color: red;
}
#content {
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
#footer {
width: 100%;
max-height: 100px;
height: 100%;
background-color: blue;
}
<div id="card">
<div id="header">
</div>
<div id="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer">
</div>
</div>
It's running right; you set it to height: 400px and the height is 400px (inspect it).
I think what you're looking for is to replace height: 400px with height: 100vh to make #card cover the entire height of any screen.
Whenever I try to add columns to my page, my footer becomes unstuck and the content goes into the footer. However it works perfectly fine when I add content straight to the holding content div.
HTML:
<div id="wrapper">
<div id="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
font-family: arial, sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:96px; /* Height of the footer element */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#footer {
background:#162b83;
width:960px;
height:96px;
position:absolute;
bottom:0;
left:50%;
margin-left: -480px;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}
Hi I made some adjustments in your code and updated here
Please check it, this is what you need. Thanks.
html
<div id="content">
<div class="left_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.SS</p>
</div>
<div class="right_content"> sdfasd </div>
<div class="footer-outer">
<div id="footer"></div>
</div>
</div>
css
body {
padding: 0;
margin: 0;
}
#content {
padding-bottom: 96px; /* Height of the footer element */
width: 960px;
margin: 0 auto;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}
.footer-outer {
float: left;
width: 960px;
position: relative;
}
#footer {
background: #162b83;
width: 960px;
height: 96px;
position: absolute;
bottom: -96px;
left: 0;
}