I created my custom timeline using flexbox, but I have problem with smaller screens. When you start stretching the window, flex items starts overlap. Could you please help me add some space but dont break the border (which is creating the timeline)?
:root{
--image-url: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80";
}
*,
*::before,
*::after{
margin : 0;
padding: 0;
box-sizing: inherit;
}
body{
box-sizing: content-box;
font-size: 62.5%;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height : 100vh;
background-image:
linear-gradient(
to right top,
rgba(13, 13, 13, .75),
rgba(13, 13, 13, 1)
),
url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.timeline-row{
font-size: 1.2rem;
display: flex;
min-width: 25%;
min-height: 5rem;
color: #fff;
}
.timeline-item{
flex:1;
display: flex;
align-items: center;
&--date{
border-right: 1px solid currentColor;
justify-content: flex-end;
}
&--content{
border-left: 1px solid currentColor;
position: relative;
justify-content: center;
&::before{
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color:currentColor;
position: absolute;
top: 50%;
left: -.55rem;
transform: translateY(-50%);
}
}
}
.row-content{
margin: .5rem 2rem;
padding: .75rem;
background-color: rgba(67, 85, 115, .35);
border-radius: 15px;
}
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght#300&family=Zen+Kaku+Gothic+New:wght#300;400;500&display=swap" rel="stylesheet">
<div class="container">
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2019</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel posuere magna. Morbi molestie odio eget quam rutrum, non volutpat dolor pharetra. Aliquam pretium condimentum est eu fermentum. Nulla dapibus tellus in leo aliquet aliquet. Vestibulum tempor est in.</div>
</div>
</div>
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2020</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Quisque ut justo est. Donec pulvinar viverra neque a cursus. Etiam a nunc sed dui posuere facilisis. Phasellus ut est rutrum, dignissim lorem ac, maximus mauris. Phasellus consequat lorem non urna luctus, in efficitur justo sagittis. Fusce iaculis congue rutrum. Sed vehicula.</div>
</div>
</div>
<div class="timeline-row">
<div class="timeline-item timeline-item--date">
<div class="row-content">2021</div>
</div>
<div class="timeline-item timeline-item--content">
<div class="row-content">Nunc et volutpat felis, ac rutrum turpis. Nullam id sollicitudin eros. Mauris dictum nibh in lorem pharetra, id feugiat tortor tempus. Integer gravida erat nec odio lobortis fringilla. Duis at auctor tortor, eget consectetur risus. Vivamus sit amet hendrerit metus, at rutrum magna.</div>
</div>
</div>
</div>
You have set the height of your flex container to 100vh.
flexbox just does what you ask, squashing everything to fit in one window.
Just remove height: 100vh; from .container
Related
This question already has an answer here:
Child div is bigger than parent div
(1 answer)
Closed 2 years ago.
Hello I have a Flexbox Container with three childs. The first one has a textarea like indicated.
However the textarea of the child exceeds the parent element.
It only should be within the parent element in the child.
Second I want to make the content scrollable within child 2 and 3.
Many hours of search could not give me any resolution.
Do you have one?
Thanks in advance for helpful answers.
.flex-rows {
display: flex;
flex-direction: column;
}
.flex--1 {
flex: 1 1 auto;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="flex--1">
<div class="child1">
<div><textarea></textarea></div>
</div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</div>
In order to make content in .child2 and .child3 scrollable, you need to set a height height: 250px; and overflow-y: scroll; on each of the elements.
Additionally, your textarea is exceeding the parent because its padding is giving it some extra height. Setting box-sizing: border-box; on .child3 textarea makes it so the padding is included in the element's height. See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
.flex-rows {
display: flex;
flex-direction: column;
}
.flex--1 {
flex: 1 1 auto;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
.child2, .child3 {
height: 250px;
overflow-y: scroll;
}
.child1 textarea {
box-sizing: border-box;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="flex--1">
<div class="child1">
<div><textarea></textarea></div>
</div>
<div class="child2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.</div>
<div class="child3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor ultricies eros id accumsan. Quisque at leo leo. Sed metus quam, dictum nec auctor at, hendrerit et felis. In molestie pulvinar lectus eget feugiat. Curabitur ligula quam, ullamcorper ut pharetra non, vestibulum at nulla. Curabitur vehicula at neque bibendum mattis. Ut cursus libero odio, ac molestie tortor eleifend in. Phasellus quis velit eu metus tristique tincidunt id a nisi. Sed ac massa dignissim eros consequat iaculis et non mi. Suspendisse magna metus, convallis at sollicitudin sed, fringilla eget mi.</div>
</div>
</div>
Try add overflow-y: scroll; to the textarea
.flex-rows {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.parent {
height: 250px;
width: 100%;
}
.child1,
.child2,
.child3 {
float: left;
display: inline-block;
height: 100%;
margin: 0px;
padding: 0px;
}
.child1 {
background-color: blue;
width: calc(100% - 253px);
}
.child1>*,
.child1>*>* {
width: 100%;
display: block;
height: 100%;
}
.child2 {
background-color: green;
width: 100px;
}
.child3 {
background-color: red;
width: 150px;
}
.child1 textarea {
overflow-y: scroll;
}
<div class="parent flex-rows">
<div>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
</div>
<div class="parent flex-rows">
<textarea class="child1"></textarea>
<div class="child2"></div>
<div class="child3"></div>
</div>
</div>
</div>
Div should not be over Div with background image with divs inside, but for some reason the about div is displayed over the nav:
body {
margin: 0;
padding: 0;
/*background-color: blue;*/
}
.divider {
background-color: #be2b27;
width: 100%;
height: 100px;
position: absolute;
display: block;
padding: 0;
}
.divider h1 {
font-family: "Nexa Light";
font-size: 2em;
color: white;
text-align:left;
padding-left: 10px;
}
.lorem-text {
font-family: "Menlo";
font-size: 1.2em;
color: white;
}
.start-section {
margin-top: 30px;
/* position: absolute; */
padding-left: 20px;
padding-top: 20px;
}
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
#home-head {
font-family: 'Nexa Light';
/* font-size: ; */
padding-top: 30px;
color: white;
}
.nav { }
<div id="start-bg">
<!--<div class="nav"...>...</div>-->
<div class="start-section">
<h1 id="home-head">Landing Page</h1>
<p class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare est in maximus vestibulum.
Mauris eu tincidunt quam.<br> In commodo neque id tortor mattis, non consectetur ante tincidunt.
Nunc ultrices ultricies purus, id finibus justo eleifend sit amet.<br>
Sed in iaculis libero, et gravida nibh.
Proin mollis, nibh eu rhoncus scelerisque, orci ex posuere mi, id pharetra purus est suscipit sapien.
Aliquam fermentum dignissim ultricies. Cras vitae neque tincidunt, tristique neque at, ornare leo.<br>
Integer gravida lectus sed venenatis auctor. Vestibulum sed ligula eget dui ultrices luctus.<br>
Etiam dapibus auctor sollicitudin. Nam vel dui non lorem semper scelerisque. Donec sed condimentum mauris.
Maecenas ac enim sit amet orci sodales porta.
</p>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
</div>
</div>
<div class="divider">
<h1>About</h1>
</div>
There must be something wrong with the positions or something or the fact that when the div has a background image it is not registered as holding any content so the about div is displayed above it.
What do I need to do?
I want the div to be displayed after the background image ends and stays there when I remove the images. If you need the nav html and css code i will give it to you.
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
If you remove:
position: absolute;
Red bar go to bottom bottom of the page.
I'm having a problem with a flexbox layout inside an iframe. The layout works fine in a normal view, but once placed inside an iframe (like here in this snippet or codepen etc.), the flex children of the second flex column doesn't have equal heights anymore.
I can't really show you the difference, because all snippets are automatically placed in iframes...
*,
*::before,
*::after {
box-sizing: border-box;
}
.b-block {
margin: 0 auto;
max-width: 1000px;
padding: 10px;
}
.b-block__wrap {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -10px;
}
.b-block__item,
.b-block__item--large {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-direction: column;
padding: 0 10px;
margin-bottom: 10px;
justify-content: space-between;
}
#media (min-width: 992px) {
.b-block__item,
.b-block__item--large {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 0;
}
}
.b-article,
.b-article--large {
display: flex;
flex: 1; /* works in a div but not in an iframe */
/* flex: 0 1 auto; // works but without equal heights */
padding: 10px;
font-size: 16px;
background: #eee;
}
.b-article:not(:last-child) {
margin-bottom: 10px;
}
.b-article--large {
min-height: 300px;
}
<section class="b-block">
<div class="b-block__wrap">
<div class="b-block__item--large">
<article class="b-article--large">Vivamus erat sit habitasse nisi quam penatibus proin nascetur hac volutpat porttitor ad condimentum mauris aenean fames lectus tincidunt inceptos
</article>
</div>
<div class="b-block__item">
<article class="b-article">Convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
</article>
<article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.
</article>
</div>
</div>
</section>
Is there any workaround for this?
I already tried:
• Wrapping the b-article in the second b-block__item in an extra div
• Setting the flex property of the b-article in the second b-block__item to flex: 0 1 33%;
but no luck yet.
Is this even possible in an iframe?
Thanks!
I'm back, and doing yet another school project. I'm trying to get my site to use some custom font that I found online. This is my JSFiddle link to my code, and my HTML code is as follows:
<!doctype html>
<html>
<head>
<title>
| Bat-tection |
</title>
<meta charset="utf-8">
<link href="Styles/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="title">
Bat-Tection
</h1>
<h6 id="ctrtitle">
The only home protection service you will ever need!
</h6>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<aside>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
</aside>
<section class="text">
<article>
<h2>Article One Heading</h2>
<p>
Article One Content<img src="../Tuts/Images/pic07.jpg" alt="A Generic Image Caption Here" class="rgt">
</p>
<p>
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor. Curabitur posuere vulputate egestas. Vestibulum a leo id sapien commodo aliquam commodo quis dui. Phasellus at leo id elit dignissim egestas a eu elit. Quisque bibendum tellus at placerat luctus. Nulla blandit erat ipsum, eu molestie purus sollicitudin sit amet. Sed vehicula tortor quis libero finibus fringilla. Nam nibh mauris, lacinia a suscipit et, fringilla non lorem. Vestibulum tempor vel ligula ut interdum. Donec convallis porttitor est sit amet porttitor. Sed ullamcorper mauris nibh, id fermentum velit iaculis quis. Etiam rutrum blandit hendrerit. Proin a laoreet purus.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
<p class="spec"></p>
<article class="cols">
<h2 class="cols-span">Lorem ipsum dolor sit</h2>
<p class="lead cols-span">
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
</section>
<aside class="ads">
<p>
Advertisment can run the size out to the margin of the previous container element, no more!
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
</aside>
<footer>
<p>
Copyright © 2016 All Right Reserved
</p>
</footer>
</div>
</body>
</html>
My CSS code is as follows:
#charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
#font-face {
font-family: battext;
src: url(../Fonts/batmfa.eot), /* IE9 Compat Modes */
src: url(../Fonts/batmfa.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
url(../Fonts/batmfa.woff2) format(woff2), /* Super Modern Browsers */
url(../Fonts/batmfa.woff) format(woff), /* Pretty Modern Browsers */
url(../Fonts/batmfa.ttf) format(truetype), /* Safari, Android, iOS */
url(../Fonts/batmfa.svg#svgFontName) format(svg); /* Legacy iOS */
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: left;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 20px;
}
article p{
text-indent: 2em;
padding-left: 1.5em;
}
body{
font-family: "battext";
color: #FFFD5D;
background-color: #252122;
font: 100% Verdana;
}
#ctrtitle{
text-align: center;
}
.cols{
/*-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-colum-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span{
-webkit-coloumn-span: all;
-moz-column-span: all;
column-span: all;
font-size: 1.2em;
margin-bottom: 0.2em;
line-height: 1.2em;
}
.cols p{
margin-bottom:1.1em;
text-align: justify;
}
footer{
clear: both;
background-color: #29292C;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
header{
background-color: #29292C;
padding-bottom: 1em;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0 0 1em 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav ul{
text-align: center;
margin: 1em;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;
nav ul li a{
background-image: url(../Images/bat-button1.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
outline: 0;
}
nav ul li a:hover{
background-image: url(../Images/bat-button2.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
nav ul li ul{
display: none;
}
p{
margin-bottom: 1.2em;
}
.rgt{
float: right;
max-width: 30%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.spec{
margin: -5px 0 10px 0;
border-bottom: 1px dashed #000000;
line-height: 0;
}
.text{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#title{
color: #FFFD5D;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
Can you guys off me any help?
Thanks,
-dark_nemesis
what i understand from your question is that you want to know how to use fonts, isn't it?
you can always visit https://www.google.com/fonts and under every font there is a button about how to use this font.
You're just missing a line of code (I think) it is
font-family: battext, sans-serif;
If you insert that under the body element as well as the font-face. Then I think it will work. Hope this helps...
take the quotations off the css
font-family: "battext"
side note, check to make sure you have right to use it in whatever you're doing
also check to make sure the file path is correct.
If your structure is like this: (upper case = folders)
HTML
index.html
CSS
styles.css
FONT
myfont.ttf
then.. these should be your code
html: <link type="text/css" rel="stylesheet" href="../css/styles.css" />
take off "../" if index.html is same level as CSS/FONT folder
css: #font-face { font-family: myfont; src: url(../font/myfont.ttf); }
the src for css will start where in the folder it's in, so styles.css has to go back a directory, then go to font and your file
I am trying to implement a sticky footer with CSS using this: http://www.cssstickyfooter.com/using-sticky-footer-code.html .
I have almost got it working, but when having floats in my content container, I find that the footer will overlap a bit of the content.
This is the markup:
<div class="container" id="content-area">
<div class="module-content" id="mycontent">
<div class="menu">
<ul>
<li>
<a class="current-page" href="http://localhost/">1</a>
</li>
</ul>
</div>
<div class="module-content">
<div>
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac
dui, nulla lacus hac, raesent euismod habitant eros massa
nulla. Justo dui, facilisis cras. Est ante maecenas
vehicula, etiam vestibulum mi lorem massa, sed nullam
suspendisse lectus ante purus gravida, iaculis urna pede
fermentum. Arcu id ligula arcu, erat vivamus quisque
quisque, tristique ipsum et. Sociis duis ut, morbi dolor
duis volutpat lacus viverra, scelerisque sodales sed, vel
nulla. Elit pede nullam ullamcorper consectetuer ac massa,
lobortis eget id dictumst et quis, nulla metus. Magnis id
id suscipit porttitor faucibus, felis commodo risus massa,
fusce tempus praesent aliquet sit vulputate tempor.</p>
</div>
</div>
</div>
</div>
<div class="container" id="footer">
<div class="container">
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
nulla lacus hac,</p>
</div>
</div>
And the CSS:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
overflow: auto;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
And a fiddle of the above: http://jsfiddle.net/CfuAg/
And a picture of what's happening
Why is this happening and what are some ways to fix it? I tried adding a padding of 70px to #content-area, but it pushes the footer down by 70px and doesn't stick to the buttom of the window anymore.
Fixed! overflow: auto was assigned to the wrong element (it should be assigned to .module-content) and module-content should have a bottom-padding with a height of the footer:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
overflow: auto;
padding-bottom: 70px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
I've modify your fiddle to make it works the way I understood what you're looking for.
I've remove the clear: both; and margin-top: -70px; and use instead the bottom property which I've set to 0
http://jsfiddle.net/CfuAg/4/
Hope this is what you looked for.