the layout here is a template for my website http://jsfiddle.net/QvFV8/12/ as you can see the content overflows the footer.
It works fine for when there is only a small amount of content, which is what I want.
I've tried clear both in the 1st footer section, but this has no effect
How can the page be stretched so that the footer remains at the bottom, regardless of the amount of content (some pages will have more or less content then others)
<body>
<div class="container">
<div class="header">
<div class="headerleft">
<div class="headerleftcon">leftcon</div>
</div>
<div class="headerright">
<div class="headerrightcon">rightcon</div>
</div>
<div class="header-content">Header
</div>
</div>
<div class="body">
<div class="left-sidebar">
<div class="left-content">left sidebar</div>
</div>
<div class="right-sidebar">
<div class="right-content">right sidebar</div>
</div>
<div class="content">Content 1
<div class="centerbox">
<div class="centerboxcontent">Center box <br> </div>
</div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2
bla bla bla
</div>
</div>
<div class="footer">
<div class="footerleft">
<div class="footerleftcon">botleftcon</div>
</div>
<div class="footerright">
<div class="footerrightcon">botrightcon</div>
</div>
<div class="footer-content">Footer</div>
</div>
</div>
</body>
The css is as follows
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;}
.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;}
.header-content{
padding: 20px;
text-align: center;}
.headerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.headerleftcon{
padding: 0px 0px 0px 0px;}
.headerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.headerrightcon{
padding: 0px 0px 0px 0px;}
.footer-content{
padding: 20px;
text-align: center;}
.container{
height: 100%;}
.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;}
.content{
padding: 80px 0px 0px 0px;}
.left-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: left;
clear: both;}
.right-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: right;}
.centerbox{
height:100px;
background-color: blue;}
.centerboxcontent{
padding: 0px 0px 0px 0px;}
.right-content{
padding: 80px 0px 0px 0px;
text-align: right;}
.left-content{
padding: 80px 0px 0px 0px;}
.footer{
clear:both;}
.footerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.footerleftcon{
padding: 0px 0px 0px 0px;}
.footerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.footerrightcon{
padding: 0px 0px 0px 0px;}
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
.header, .footer {
height: 80px;
background-color: #EFEFEF;
}
.header-content {
padding: 20px;
text-align: center;
}
.headerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.headerleftcon {
padding: 0px 0px 0px 0px;
}
.headerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.headerrightcon {
padding: 0px 0px 0px 0px;
}
.footer-content {
padding: 20px;
text-align: center;
}
.container {
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
.body {
background-color: #C7DFFA;
overflow: hidden;
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.content {
margin-right: 50px;
margin-left: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 80px;
}
.left-sidebar {
background-color: gray;
width: 50px;
float: left;
}
.right-sidebar {
background-color: gray;
width: 50px;
float: right;
}
.left-sidebar, .right-sidebar {
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.centerbox {
background-color: blue;
}
.centerboxcontent {
padding: 0px 0px 0px 0px;
}
.right-content {
text-align: right;
}
.left-content {
}
.footer {
clear:both;
position: absolute;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
}
.footerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.footerleftcon {
padding: 0px 0px 0px 0px;
}
.footerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.footerrightcon {
padding: 0px 0px 0px 0px;
}
I understand that getting the footer of a website is somewhat harder than anything else, but i don't know how many more questions i have to see about this, its simply a call for learning CSS, now here are two fiddles that i have made before for the same question
So, what you have to do is make sure your footer is absolutely at the bottom of your container, so to do that you need to make your container position:relative; and 100% height of the content Also the container has to have a padding bottom that is the height of the footer . that's it really
http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
The duplicate question is here
How do I make sure that my footer shows all the way at end of the page rather than in the middle?
here is some example code
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I need some help. I would like to make to these two divs, participation and benefits, sit side by side each other horizontally, but I can only edit the CSS code. Here's what I have so far:
.supporting {
padding: 150px;
margin-bottom: 40px;
margin-right: 10px;
}
.participation {
margin: 10px 0px 0px 0px;
width: 400px;
height: 400px;
background-color: lightgray;
padding: 30px;
position: relative;
}
#zen-participation {
clear: both;
float: left;
padding-left: 30px;
padding-top: 10px;
}
.benefits {
margin: 10px 0px 0px 0px;
padding: 30px;
background-color: lightcoral;
background-repeat: no-repeat;
position: relative;
width: 80%;
}
#zen-benefits {
clear: both;
float: right;
width: 30%;
padding-left: 30px;
padding-top: 50px;
}
<div class="main supporting" id="zen-supporting" role="main">
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus.....</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? ...</p>
</div>
</div>
Try using float right in your benefits div and change your participation position to absolute:
.benefits
{
margin: 10px 0px 0px 0px;
padding: 30px;
background-color: lightcoral;
background-repeat: no-repeat;
float: right;
position: relative;
width: 80%;
}
.participation {
margin: 10px 0px 0px 0px;
width: 400px;
height: 400px;
background-color: lightgray;
padding: 30px;
position: absolute;
}
You can use flexbox.
Set the parent .supporting div to display: flex;
.supporting {
display: flex;
padding: 150px;
margin-bottom: 40px;
margin-right: 10px;
}
.participation {
margin: 10px 0px 0px 0px;
width: 400px;
height: 400px;
background-color: lightgray;
padding: 30px;
position: relative;
}
#zen-participation {
clear: both;
float: left;
padding-left: 30px;
padding-top: 10px;
}
.benefits {
margin: 10px 0px 0px 0px;
padding: 30px;
background-color: lightcoral;
background-repeat: no-repeat;
position: relative;
width: 80%;
}
#zen-benefits {
clear: both;
float: right;
width: 30%;
padding-left: 30px;
padding-top: 50px;
}
<div class="main supporting" id="zen-supporting" role="main">
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus.....</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? ...</p>
</div>
</div>
you can do it in a multitude of ways, one would be:
add to the parent (.main / .supporting), the following rules
display: flex
flex-direction: row
Like so:
.supporting {
display: flex;
flex-direction: row;
padding: 150px;
margin-bottom: 40px;
margin-right: 10px;
}
I have the following html code with a div that contains 4 additional divs:
<body>
<div id="main">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
How can I access the 4 divs inside and position them on the page to my liking with css?
The layout I'm going for is something like this:
I've been trying to google this but couldn't find anything helpful.
Thanks!
With the best understanding of your question, I tried to give you an answer.
section {}
.main {
float: left;
position: absolute;
width: 400px;
height: 100%;
margin: auto 13%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.section1 {
width: 40%;
}
.section2 {
width: 40%;
}
.section1,
.section2 {
margin: 0px;
padding: 0px;
padding: 0px 5px;
float: left;
position: relative;
height: 80%;
}
.section3 {
padding: 0px;
/*border: 1px solid #cccccc;*/
float: left;
position: relative;
width: 83%;
margin: 5px 5px;
height: 20%;
}
.section1 .inner-1 {
float: left;
width: 100%;
height: 100%;
border: 1px solid #000000;
}
.section2 .inner-1 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
}
.section2 .inner-2 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
margin: 10px 0px 0px 0px;
}
.section3 .inner-1 {
width: 100%;
float: left;
border: 1px solid #000000;
width: 100%;
height: 50%;
}
<section class="main">
<section class="section1">
<div class="inner-1">
</div>
</section>
<section class="section2">
<div class="inner-1"></div>
<div class="inner-2"></div>
</section>
<section class="section3">
<div class="inner-1"></div>
</section>
</section>
Hope it may helpful to you.
I am trying to set three divs side by side with each equal width and height.
I am unable to remove that extra space at right at right most div. If I set its margin-right to 0 the rightmost div becomes bigger than other two.
Here is the fiddle.
Css:
.recordpopup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, .8);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.recordpopup .retry {
background-color: black;
border: 1px solid white;
xborder-radius: 8px;
box-sizing: border-box;
color: white;
font-family: ProximaNova-Regular;
font-size: 16px;
font-weight: bold;
xheight: 50px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
position: relative;
text-align: center;
top: 30%;
width: 40%;
z-index: 15000;
border-radius: 8px;
padding: 20px 10px;
background-image: url('images/gray_bar.png');
background-repeat: repeat-x;
background-color: white;
}
#product-wrapper {
overflow: hidden;
margin-top: 25px;
}
.product {
float: left;
width: 33%;
display: table-cell;
width: 33.33333333%;
}
.product .container {
margin-right: 10px;
padding: 10px;
background-color: #000;
}
.product .container img {
display: block;
margin: 0 auto;
width: 100%;
}
#closeRecord {
background: black none repeat scroll 0 0;
border: 2px solid white;
border-radius: 50%;
color: white;
cursor: pointer;
height: 25px;
right: -15px;
left: right;
position: absolute;
top: -10px;
width: 25px;
}
Html:
<div class="recordpopup">
<div class="retry">
<div id="closeRecord">x</div>
<div style="width: 100%;text-align: left;margin: 5px 0;font-size: 12px;color:#333;"><span class="TitleText">Lorem Ipsum Lorem Ipsum</span> </div>
<div id="product-wrapper">
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
</div>
</div>
</div>
Here is my solution.
The key is removing the margin-right: 10px and adding
.product:nth-child(1) .container{
margin-right:5px;
}
.product:nth-child(2) .container{
margin: 0 5px 0 5px;
}
.product:nth-child(3) .container{
margin-left: 5px;
}
JSFiddle ===> https://jsfiddle.net/kjkk3f9d/1/
The margin-right: 10px was pushing out your divs, replace it with margin: 0 5px to give a uniform look
.product .container {
margin: 0px 5px;
padding: 10px;
background-color: #000;
}
https://jsfiddle.net/kjkk3f9d/3/
check out my fiddle:
https://jsfiddle.net/kjkk3f9d/2/
the important styles are
#product-wrapper {
overflow: hidden;
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.product {
flex-basis:0;
flex: 1 1 auto;
margin: 5px;
}
When I put first and second div I made into the the main div it isnt in him, but outside under.
Please paste it in text editor and run it to see the problem and tell me what I did wrong please.
HTML
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="main">
<div id="second_div"></div>
<div id="facebook"></div>
<div id="twitter"></div>
</div>
</body>
CSS
div.main {
background-color: gray;
height: 1000px;
width: 1260px;
padding: 0px;
margin: 0px;
}
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#second_div {
background-color: brown;
height: 280px;
width: 1150px;
border: 4px solid black;
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
overflow: hidden;
float: left;
}
#twitter {
background-color: lightblue;
height: 100px;
width: 200px;
float: left;
margin-left: 980px;
margin-top: 180px
}
#facebook {
background-color: darkblue;
height: 100px;
width: 200px;
margin-top: 20px;
margin-right: 80px;
margin-left: 980px;
}
div.main {
background-color: gray;
width: 1260px;
padding: 0px;
margin: 0px auto;
}
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#second_div {
background-color: brown;
height: 280px;
width: 1150px;
border: 4px solid black;
display:inline-block;
verticle-align:top;
}
#twitter {
background-color: lightblue;
height: 100px;
width: 200px;
display:inline-block;
verticle-align:top;
}
#facebook {
background-color: darkblue;
height: 100px;
width: 200px;
display:inline-block;
verticle-align:top;
}
<div class="main">
<div id="second_div">
<div id="facebook"></div>
<div id="twitter"></div>
</div>
</div>
HTML
<div class="main">
<div id="second_div">
<div id="facebook"> </div>
<div id="twitter"> </div>
</div>
</div>
css
.main { background:gray; overflow:hidden; padding:50px;}
#second_div { background:brown; height:50%; overflow:hidden; border: 4px solid black; padding:20px;}
#facebook { float:left; background:darkblue; width:100px; height:150px; margin-right:20px;}
#twitter { float:left; background:lightblue; height:150px; width:150px;}
Whenever I try to add margin-top: 30px to my box_1 and box_2 <div>, my bottom <div> gets pushed down and disappears. It seems like my wrapper wont expand to fit the content.
How do I get a 30px gap between top and box_1/2 and bottom?
<html>
<head>
<title>Circle Motion</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="outer-wrapper">
<div id="wrapper">
<div id="top">
</div>
<div id="box_1">
<img src="chrome_400x400.png" />
</div>
<div id="box_2">
<img src="firefox_400x400.png" />
</div>
<div id="bottom">
<p>All Rights Reserved - CSS_maniac 2012 ©</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* My CSS */
html {
height: 100%
}
body {
background-color: grey;
}
#outer-wrapper {
height: 100%;
width: 1000px;
margin: 0px auto;
background-color: #EAFFDB;
-moz-border-radius: 15px;
border-radius: 15px;
}
#wrapper {
height: 100%;
width: 960px;
margin: 0px auto;
background-color: #EAFFDB;
overflow: hidden;
}
#top {
width: 900px;
height: 110px;
margin-top: 35px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
}
#box_1 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:left;
margin-left: 30px;
text-align: center;
}
#box_2 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:right;
margin-right: 30px;
text-align: center;
}
#box_1 img {
margin: 15px 0px;
}
#box_2 img {
margin: 15px 0px;
}
#bottom {
width: 900px;
margin: 0px auto 0px auto;
text-align: center;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
clear:both;
}
/* Classes */
.clear {
clear: both;
}
I've tweaked your code a little bit for you:
http://jsfiddle.net/83RZc/