I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:
<header>
<div class='container'>
....
</div>
</header>
<div id='wrap'>
<div class='container'>
<div class='white-background'>
<div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
<div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
</div>
</div>
</div>
<footer>
<div class='container'>
<div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
</div>
</footer>
And this is the css:
#wrap {
min-height: 100%;
background-image:url('bk.gif');
background-color: #2c3e50;
}
.white-background{
width:100%;
height:100%;
display:block;
overflow:auto;
background-color: #fff!important;
}
footer{
background-color: #f2f2f2;
text-align:center;
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
padding-top:20px;
}
I have done some tries and took a look to other answers, but without success...
Try add first stycky footer solution
http://ryanfait.com/html5-sticky-footer/
Related
I have this code:
http://jsfiddle.net/4axkLm9a/
I want the sidebar to appear on the right side of the main content which should stay centered on the page.
I'm trying to design this page so that the main content will be centered on the page, and a sidebar where I can display a vertical banner ad.
Can someone help please? :)
thanks.
Here's the HTML:
<div id="header">
<div id="main">
<div id="inner">
</div>
</div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
And the CSS:
body {
margin:0;
height:100%;
}
#header{
background-color:#f0f0f5;
padding-right:10px;
padding-left:10px;
font-family:Arial,
sans-serif;
font-size:14px
}
#main {
padding-bottom:20px;
margin:0 auto;
max-width:784px;
height:100%;
}
#inner {
border:1px solid #c9c9c9;
padding:20px 20px;
color:#44423c;
background-color:#fff
}
#sidebar {
width:200px;
}
#footer {
background-color:#d3d3d3;
padding-bottom:18px;
padding-top:18px;
margin:0 auto;
max-width:1030px
font:normal 14px/1em Arial, sans-serif;
color:#727272;
text-align:center;
clear: both;
}
Add these to your code. Example Fiddle
#sidebar {
float: right;
}
#inner {
float: left;
width: 584px;
}
Additionally, you should change your code to use semantic html, such as:
<header>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
Also you need to end your #header div before you start the #main div.
Header
<div id="header">Header</div>
<div id="main">
<div id="inner">
Inner Content
</div>
<div id="sidebar">
Sidebar Content
</div>
</div>
<div id="footer">Copyright Website Blah Blah </div>
You can use the position: fixed
On your #sidebar id add:
position: fixed;
right: 0px;
top: 50%;
Fiddle Solution
The problem is that #lesson containers do not fit inside the #container. How can I make that only 3 containers fit into one column? CSS ninjas, I need your help :)
My CSS: #container - main container, #first - green container, #lesson- gray divs.
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
HTML:
<div id="container">
<div id="first">
<tpl for=".">
<div class="lesson"; >
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</tpl>
</div>
<div id="second">
</div>
</div>
For fitting the containers on the big one you just need to remove the height 100% from the id first
#first { /* height: 100% */ }
Codepen http://codepen.io/noobskie/pen/dYGLeo
It seems to be working fine for me here. Are you sure you dont have any other css being applied and overwriting rules somewhere?
HTML
<div id="container">
<div id="first">
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</div>
</div>
CSS
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
Please help me to create layout as specified on image below.
I have tried to achieve it but my knowledge of CSS is not enough and layout has to be done ASAP... I tried to play with CSS attributes like float, overflow, position:absolute, relative, etc but results were disappointing - divs overflow with each other, don't position properly and so on. Each div contains a lot of content - other divs, images, lists, etc.
Desired result:
<div style="float: left; width: 100px; height: 200px; background: #f00;">content...</div>
<div style="float: right; width: 200px; height: 300px; background: #0f0;">content...</div>
<div style="clear: both;"></div>
<div style="float: right; width: 100px; height: 300px; background: #00f;">content...</div>
<div style="clear: both;"></div>
<div style="float: right; width: 500px; height: 200px; background: #ff0;">content...</div>
<div style="clear: both;"></div>
<div style="width: 100%; height: 100px; background: #000;">content...</div>
<body>
<div class="box">
<div class="red">
</div>
<div class="green">
</div>
</div>
<!-- -->
<div class="box">
<div class="blue">
</div>
</div>
<!-- -->
<div class="box">
<div class="yellow">
</div>
</div>
<!-- -->
<div class="box">
<div class="black">
</div>
</div>
</body>
.box{
width:400px;
clear:both;
height:400px;
margin-top:10px;
}
.yellow{
background:yellow;
width:40%;
height:100%;
float:right;
}
.black{
background:black;
width:80%;
height:20%;
float:right;
}
.blue{
background:blue;
width:20%;
height:100%;
float:right;
}
.red{
background:red;
width:30%;
height:60%;
float:left;
}
.green{
background:green;
width:60%;
height:90%;
float:left;
margin-left:10%;
}
I have an issue with the following CSS. The votes I wan't to be in the same height as the Title. Although it looks like the Votes is on the same div as tags and by div. So that the 3 items to the left looks shrunken. I am quite new to it so I fail to see what I have done wrong. I had it working before I changed the height from 54 to 60 pixels, but I assume that there is something else I have added as well.
#containerpostsmall {
width: 800px;
height:60px;
}
.votes {
height:60px;
width:100px;
float: left;
}
.number {
height:40px;
text-align: center;
}
.number-text {
height:20px;
text-align: center;
}
.texttags {
width:500px;
height:60px;
float: left;
}
.title {
height:40px;
width:500px;
font-size:32px;
overflow: hidden;
white-space: nowrap;
}
.tagsby {
height:20px;
width:500px;
float: left;
}
.tags {
float: left;
}
.by {
float: right;
}
I have the following code part:
<div id="containerpostsmall">
<div class="votes">
<div class="number">
<h1>6</h1>
</div>
<div class="number-text">
votes
</div>
</div>
<div class="votes">
<div class="number">
<h1>1</h1>
</div>
<div class="number-text">
answers
</div>
</div>
<div class="votes">
<div class="number">
<h1>4</h1>
</div>
<div class="number-text">
comments
</div>
</div>
<div class="texttags">
<div class="title">
We were very tired.
</div>
<div class="tagsby">
<div class="tags">
<span style="background-color: #ffffff; border-color: #000000;">Forest</span>
<span style="background-color: #ffffff; border-color: #000000;">Ocean</span>
</div>
<div class="by">
Peter |
2013-12-03 18:56:34
</div>
</div>
</div>
</div>
It looks to me like a default h1 formatting issue. Browsers are going to apply default styling to certain elements.
I set
h1{
margin: 0;
}
See fiddle: http://jsfiddle.net/kZLub/
I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center.
the page is for example 1200px
the black,red and yellow rectangles are 960px and centered in the page.
elements in the black rectangle are added to the left,
elements in the yellwo rectangle are added to the right,
and the elements in the red tectangle are centered.
This is a good general case study for header of a site
This will solve your issue
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
I wrote an article on this a while back here is my code...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
And here is the CSS for it....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
Hope this helps... Phillip Dews
Try this..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>