For some reason my footer isn't moving along to the bottom of the content as it always has and I've been over my code back and forth and can't figure out the problem. I used both html and css validators and they saw no errors in my coding. I figured maybe I'm missing a quote or semi colon somewhere but I can't figure out what's causing the problem.
Here's a fiddle to show what's going on https://jsfiddle.net/Optiq/n6xmhL2j/1/
here's the HTML
<body>
<div id="front_page" class="page">
<header>WELCOME SLIDESHOW</header>
<div id="intro_links">
<a class="nav_link" href="#">New Artists</a>
<a class="nav_link" href="#">New Designs</a>
<a class="nav_link" href="#">New Garments</a>
<a class="nav_link" href="#">How it Works</a>
</div>
<div id="new_artists" class="title_01">New Artists</div>
<div class="new_artist_pane">
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
</div>
</div><!--front_page-->
<footer>footer</footer>
</body>
Here's the CSS
#charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
height:auto;
width:100%;
display:block;
/*background-color:#36F;*/
}
header{
width:100%;
height:444px;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
.page{
width:100%;
height:auto;
margin-bottom:4%;
display:block;
}
#intro_links{
width:88%;
overflow:auto;
margin:auto;
display:block;
}
.nav_link{
width:23%;
height:137px;
float:left;
text-align:center;
text-decoration:none;
margin:4% 0 4% 2%;
display:block;
background-color:#03C;
color:#fff;
}
.title_01{
width:44%;
height:44px;
background-color:#666;
font-size:29pt;
color:#fff;
display:block;
float:left;
clear:both;
}
.new_artist_pane{
width:66%;
height:auto;
border:solid 1px #333;
float:left;
margin:4% 0 0 2%;
display:block;
}
.art_pane01{
width:100%;
height:333px;
float:left;
border:solid 1px #CCC;
margin-bottom:4%;
display:block;
}
Such cases happen when you have elements with float
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
add this right before closing the div :
<div style="clear:both;"></div>
</div><!--front_page-->
<footer>footer</footer>
JS Fiddle
Another- and better since we don't have to add extra markup to the page - way to do it is to add .clearFix class to the parent container div which its closing tag </div> is right before the footer, to do so change this:
<div id="front_page" class="page clearfix">
to this:
<div id="front_page" class="page clearfix">
and put this in your css:
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
or :before and :after:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Here's a JS Fiddle 2 showing the above technique
more details:
https://css-tricks.com/the-how-and-why-of-clearing-floats/
http://www.positioniseverything.net/easyclearing.html
DEMO
Probably you've given float:left to every possible element and that's what disturbing it. Just add it to footer too as below:
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left;//here
}
The simplest way and most succinct way to answer what you need is to just add the clear: both to the CSS.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear: both; //add this here
}
There is 3 ways to do that.
FIRST.
add float:left; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left; // add this
}
SECOND.
set display of the footer inline:block or inline-table
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:inline-block; // or display:inline-table;
}
THIRD.
add clear:both; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear:both; // add this
}
Related
EDIT
I corrected a typo and updated the JSFiddle and this post to reflect the change. The Headline should be taking up 100% height and it isn't. Still looking for thoughts.
This is looking just as I want it on desktop. I can't figure out why on mobile it won't take up 100% of the height and stack on top of each other. The Headline also loses the color background. Here's the JSFiddle
HTML
<div class="about-header">
<h2>Headline</h2>
</div>
<div class="about-section">
<div class="about-text">
<p>The first chunk of text to let users know they gotta read a
little bit. If they want. It's not mandatory or anything.</p>
<p>The second group of text, a nice chunk of descriptive text that
explains some more about this website. It really hopes you can help
me troubleshoot this problem that I am facing.</p>
<p>Another grouping of text goes right in this little section here
that should go on for a while.</p>
</div><!-- END ABOUT TEXT -->
</div> <!-- END ABOUT SECTION-->
</section>
</div><!-- END CONTAINER -->
CSS
*{
margin:0;
padding:0;
}
html{
font-size:62.5%;
}
html,
body{
height:100%;
background-color:#FFF;
color:#000;
font-family:"Arial", "Helvetica", sans-serif;
font-size:12px;
font-size:1.2rem;
}
.container{
width:100%;
height:100%;
}
.container *{
box-sizing:border-box;
}
.row{
min-width:85%;
margin:0 auto;
}
.row:before,
.row:after{
content:"";
display:table;
clear:both;
}
#about{
height:100%;
}
.about-header{
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
.about-header h2{
display:table-cell;
vertical-align:middle;
text-align:center;
text-transform:uppercase;
}
.about-section p{
font-size:1rem;
padding-left:1.2rem;
padding-right:3rem;
padding-bottom:1.5rem;
}
.about-text{
display:table-cell;
vertical-align:middle;
}
.about-section{
width:100%;
height:100%;
position:relative;
}
/**** MEDIA QUERY****/
#media all and (min-width:500px){
.about-section{
width:50%;
height:100%;
background-color:#FFF;
left:50%;
display:table;
position:absolute;
}
.about-header{
width:50%;
height:100%;
background-color:lightblue;
right:50%;
display:table;
position:absolute;
}
}
You have a typo.
.about-head{
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
Should be:
.about-header {
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
I am having extreme difficulty organizing two divs.
I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.
My problem is that my divs are behaving oddly.
I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.
Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.
HTML:
<div id='container'>
<div id='footer'>
<div id="errors">
<p>paragraph 1</p>
</div>
<div id="other">
<p>paragraph 2</p>
</div>
</div>
</div>
CSS:
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
}
JS FIDDLE which shows how my code is behaving oddly.
I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/
You must float the errors div to the left and the other div to right and you must clear after the container around them closes.
To understand why you need to clear I suggest you read this answer
Is this what You want :
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
}
<div id="container">
<div id='footer'>
<div id="errors">
<p>Paragraph 1</p>
</div>
<div id="other">
<p>Paragraph 2</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.
Try float and position attributes like this...
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
float:left;
position:absolute;
left:0px;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
position:absolute;
right:0px;
}
try this mate, is this what you want:
#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
https://jsfiddle.net/4vuywmn2/5/
Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
I want a header,body and footer.I have coded it.when I alter the codes the footer either sits below the body when i give it like this
HTML CODE:
<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
<p style="desc p"></p>
</div>
</div>
<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><img src="img/info.png" alt="" /></div>
</div>
CSS CODE:
.body
{
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}
.desc p
{
margin-top:0;
}
CSS CODE of footer:
.footer
{
float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
when I code it as below,the footer sits on the body and when you go down you can see the text below the footer
.footer
{
float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
I want the footer to be fixed to the bottom of the screen and want the text to scroll without the scroll bar.
Could someone suggest what is the mistake I have done and where?
Try this styles for which to see scrollbar just remove overflow:hidden in body
html,
body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:fixed;
bottom:0;
left:0;
}
Sure you will get footer pushed under body with 100% height of body, with no space for footer to stay in your view, you need to solve it, anyway this question is so common, your words maybe not helped you, simply you need to search about "Sticky Footer" a lot of questions answered here or simply with magic of Google you can see :
http://ryanfait.com/sticky-footer/
and http://www.cssstickyfooter.com/
And learn about it.
Good luck.
in the footer class
Instead of
position:absolute;
use
position:fixed;
this should work
Hey guys. Im setting a position:absolute to my UL to make it appear on the bottom of div #destaques, but isnt work. Whats going on?
<div id="destaques">
<ul>//stuff</ul>
<div class="banner"><img src="images/001.jpg"/></div>
<div class="banner"><img src="images/002.jpg"/></div>
<div class="banner"><img src="images/003.jpg"/></div>
<div class="banner"><img src="images/004.jpg"/></div>
</div>
Its currently appearing on the page bottom.
#destaques {
margin:0;
padding:0;
width:1000px;
height:250px;
float:left;
overflow:hidden;
}
#destaques .banner {
position:absolute;
}
#destaques ul {
float:left;
border:1px solid #777;
background:#fff;
position:absolute;
margin:0;
color:#333;
padding:0;
right:0px;
}
What im doing wrong?
Thanks!
You need to add:
position:relative;
to your #destaques div