I'm trying to divide a page into 3 sections. A header, body and a footer. I found this blog post which comes close to what I need. But the header and footer with his approach are sticky'd to the window when you scroll up or down.
Further more I want an extra div inside the body section which is centred horizontally and vertically with a fixed width of 600px. And the height should be auto but not overlapping the header or footer. So a padding should be between those 2 sections as well.
I used his approach for the centring part which works pretty good. But I'm using Twitter Bootstrap 3 as well. And I never get the result I want.
Can someone help me out with at least the basics for this to work without TB3 so I can figure it out myself from that point to make it work with TB3?
Thanks in advance!
[EDIT]
To sum it all up what I want is:
A page divided into 3 sections where the footer and header do not stick to the window;
Centring a div inside the body section with a fixed width and a growing height that should not overlap the header or footer;
[EDIT 2]
Sorry, I forgot to mention that the header and footer have a fixed height of 65px.
Without knowing how high the inside div's height will be, and that the height will be variable, it's very difficult to create a one-size-fits-all solution, especially considering that different devices and computers have different screen sizes and resolutions. Added to this problem is that your header and footer may also be of variable height, so that also complicates things.
To get around these quirks, and have better control of your varying div height and where it sits on the page, I'd consider using JavaScript to control its position. This way, you can monitor when its height changes (depending on what you're planning on doing), and move it dynamically depending on its current height.
In the following example, I'm using jQuery to get the JavaScript done easily. You can download from their site here, and just include it in your code.
Here's a basic example (HTML first):
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
Then some CSS:
html, body {
height: 100%;
min-height: 400px; /* to cater for no element 'collision'... */
margin: 0;
padding: 0;
position: relative; /* to keep header and footer positioned correctly... */
}
#header {
background-color: green;
height: 65px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#container {
background-color: red;
width: 600px;
height: 40%;
position: absolute;
left: 50%;
margin-left: -300px; /* 50% over, then move back 300px to center... */
}
#footer {
background-color: orange;
height: 65px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
And finally, your JavaScript. Put this in the <head>...</head> section of your HTML. I've tried to comment as much as possible, but please let me know if anything's unclear:
<script src="./path/to/jquery.js"></script>
<script>
// this will run this function as soon as the page is loaded...
$(function(){
// bind the resize event to the window...
// this will call the 'centerMyContent' function whenever the
// window is resized...
jQuery(window).bind('resize', centerMyContent);
// call the 'centerMyContent' function on the first page load...
centerMyContent();
});
// the actual centring function...
function centerMyContent(){
// get the body and container elements...
var container = jQuery('#container');
var body = jQuery('body');
// work out the top position for the container...
var top = (body.height() / 2) - (container.height() / 2);
// set the container's top position...
container.css('top', top + 'px');
}
</script>
I hope this helps get you on the right track! Successfully tested in Chrome, Firefox, and Internet Explorer 7, 8, 9 and 10.
Since you're using Twitter Bootstrap 3, you can start with the "Sticky footer navbar" template which is in the examples folder in the zip file you get from http://getbootstrap.com/ homepage.
Getting rid of the sticky navbar:
open the index.html and go to row 31, it has this:
<div class="navbar navbar-default navbar-fixed-top">
Just remove the navbar-fixed-top from the class attribute.
Making container 600px wide:
Create your own css file, include it in your HEAD part of the index.html and add there
#wrap > .container {
width: 600px;
}
You also need to add mediaqueries to overwrite the basic tb3 styles for smaller viewport-sizes and add that 600px there. So below that type:
#media (max-width: 1199px) {
#wrap > .container {
width: 600px;
}
}
#media (max-width: 991px) {
#wrap > .container {
width: 600px;
}
}
#media (max-width: 767px) {
#wrap > .container {
width: 100%;
}
}
#media (max-width: 480px) {
#wrap > .container {
width: 100%;
}
}
those 100% widths are there because you'll lose the responsive width for your site if you force the page to be 600px wide under that width.
And the last part, centering vertically. Are you sure you need it? How much there will be information on the page? Does it vary much? What happens when you view the site for example with mobile device? You can achieve it using HTML & CSS only adding couple of more divs and some css.
In the index.html file wrap the container div like this:
<div class="outercontainer">
<div class="middlecontainer">
<div class="container">
Content
</div>
</div>
</div>
And change the #wrap > .container part of the CSS to:
.outercontainer {
display: table;
height: 100%;
position: absolute;
width: 100%;
}
.middlecontainer {
display: table-cell;
padding: 65px 0; /*For your header and footer*/
vertical-align: middle;
}
.container {
height: auto;
margin: 0 auto;
max-width: 600px;
position: relative;
}
Here's a Codepen of the vertical centering: http://codepen.io/anon/pen/Gposw
You may need some tweaks to get it work like you want it but using these gives you good start.
Try:
JavaScript:
<div class = "row-fluid">
<div class = "header">
</div>
</div>
<div class = "row-fluid">
<div class="container main">
</div>
</div>
<div class = "row-fluid">
<div class = "footer">
</div>
</div>
CSS:
.header, .footer {
height: 65px;
}
.container.main {
width: 600px;
}
Related
I need to make a page without scrolling in landscape version.
The height of the page to be 100%.
I've tried everything.
In Safari, I always get to scroll the lower region.
And I get a hidden area.
I can not hide the bottom bar.
And I can not reduce the height. I can not make it smaller than 320.
The browser creates an additional white area at the bottom of the page.
(Also, i can't use JS)
I will be grateful to anyone reply.
P.S. In the screenshots is not my site, only to show an effect
There are a few ways you can accomplish this. First, you may be able to simply use a table that fills the entire viewport so that each element is then spaced evenly when switching orientations. You could also solve this using simple CSS so you will have more control and have the ability to take advantage of media queries.
See this working fiddle
First you want to wrap all of your content in a single parent container that fills the entire view. This will prevent content from existing outside of the view.
HTML
<div class="wrapper">
<div class="menu">
The Menu
</div>
<div class="hero">
The Hero
</div>
<div class="head">
Text
</div>
<div class="content">
This is content.
</div>
</div>
CSS
.wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
From here you can then set each element to take up a certain percentage of the parent container so that rescaling recalculates the elements proportions instead of forcing a scroll.
.menu, .hero, .head, .content {
position: absolute;
left: 0;
width: 100%;
}
.menu {
top: 0;
height: 10%;
background: #eee;
}
.hero {
top: 10%;
height: 20%;
background: #aee;
}
.head {
top: 30%;
height: 10%;
background: #eae;
}
.content {
top: 40%;
height: 60%;
background: #eea;
}
Implementing it this way will allow you to have a bit more control of the behavior of each element as the view size changes.
Problem: When you make a certain div's position fixed (often used as a side bar, or side menu kind of stuff), and if you continue scrolling down, the div overlaps with the footer.
body {
margin: 0;
}
#header {
width: 100%;
height: 290px;
background-color: #07CB6F;
}
#body {
width: 100%;
height: 3450px;
background-color: #2FA3F7;
}
#body_inner {
width: 1280px;
height: 3450px;
margin: 0 auto;
}
#side_menu {
width: 220px;
height: 270px;
position: fixed;
background-color: #ffffff;
}
#footer {
width: 100%;
height: 200px;
background-color: #FF00AB;
}
<div id="header">
</div>
<div id="body">
<div id="body_inner">
<div id="side_menu"></div>
</div>
</div>
<div id="footer">
</div>
I did not use any jquery this time. With the codes given above, since the #side_menu is set as height: 270px, it seems to be okay with the overlapping, however, it still overlaps with the footer if you zoom up the browser (and sometimes depending on the types of browsers and computers).
I would like to know why it happens, and how can it be solved (or prevented).
Thanks in advance :)
Here's a fiddle with the solution
https://jsfiddle.net/stc0ogy2/1/
you need to start using the z-index, it works like the photoshop layers though the z-index will not work without the position so you have to add a position like absolute, relative and so on.
UPDATE
As #AndreiGheorghiu mentioned you should use some javascript for a better solution, choose one of the libraries from the list he gave you.
UPDATE 2
I found this easy-to-use library that I believe will help you with the fixed side menu, it's called tether. Hope it helps.
Your footer is looking to take up 100% of the width space at the bottom and a side bar that wants to take up 220px of the width. On a small screen your menu and footer are fighting for space because its not mathematically possible for one item to take up 100% of space and another item to sit next to it.
You won't notice a problem full screen on most desktops because your menu is too heightwise to be noticeable.
Ideally when declaring your width for the menu and footer you want to use calc() to enable resizing without causing overlap.
https://jsfiddle.net/nu8av25m/ a quick example I put together to demonstrate how it works.
<body>
<div class="navigation">menu</div>
<div class="main">main body</div>
<footer>footer</div>
</body>
.navigation {
Width:50px;
Height:100%;
Background-color: red;
Float:left
}
.main{
Width: calc(100% - 200px);
Height: calc(100% - 100px);
Background-color: blue;
Right:0;
}
Footer{
Width: calc(100% - 100px);
Height: 50px;
Background-color:green;
Bottom: 0
}
I have a WP blog with fluid layout, the main content is in a centered div, about 1000px wide.
Now I want to put an ad banner area on each side, and I want to use fixed on the position so that these ad:s stay when user scrolls down the blog.
I have seen blogs with similar ad's but they don't have the fluid layout but instead can use the position: fixed and width:Ypx left:-Ypx which make their ad fixed nicely on the left side always.
It seems that this is not possible though with a fluid layout?
This is the effect I am trying to mimic, see how both sides don't scroll down...
http://radarmagazine.se WRONG SITE
--- update ---------
I put the wrong sample site.. this is the one with fixed positions:
THIS IS THE SAMPLE SITE:
http://freshnet.com
This is possible without JS. Here's my approach.
Basically, you'd want to setup your containing div, then clone it and set it within a div dedicated to position: fixed; that way the cloned container within the fixed div will share the same styles as your actual containing div and scale accordingly.
<div class="ads"> <!-- Dedicated position: fixed; -->
<div class="wrap"> <!-- Cloned container for positioning of Ads -->
<img src="http://placehold.it/100x750&text=Ad1" />
<img src="http://placehold.it/100x750&text=Ad2" />
</div>
</div>
<div class="wrap"> <!-- Main container with a z-index of 1 -->
<img class="main" src="http://placehold.it/960x300" />
</div>
Once that's in place, you can position your "ads" accordingly within the fixed div, and position them outside of the responsive / fixed container so they adhere to it - giving the illusion that they're adhering to your actual wrapper. And after your max-width is reached the fixed ads will be pushed out of the viewport.
http://jsfiddle.net/m0v3vqcp/ - Fiddle
Full Screen /
With Their Ads
It's possible using some JavaScript, fetching the width of the content on the window.resize event and then updating your Ads position on the x-axis based on that value. I made a JSFiddle to illustrate how this could be achieved.
http://jsfiddle.net/r86r6j1f/
You can use padding on the body to make room for the banners, a quick example:
http://jsfiddle.net/dpcd3c1b/
I don't believe you need Javascript for it. You should be able to do it with a couple of relative positioned floats and positioned fixed.
http://jsfiddle.net/9ov32nkd/1/
body, html {
margin: 0;
padding: 0;
}
#wrapper {
min-width: 960px;
position: relative;
margin: 0 auto;
}
#inner {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
}
.content {
width: 720px;
padding: 20px;
background-color: #CCC;
margin: 0 auto;
float: left;
}
.banner {
width: 100px;
height: 100px;
position: relative;
}
.banner1 {
float: left;
}
.banner1 .inner,
.banner2 .inner {
background-color: #EFEFEF;
height: 300px;
width: 100px;
position: fixed;
top: 0;
}
.banner2 {
float: right;
}
Looking for a responsive layout using CSS only that can behave like the images shown. There are 5 basic areas of the site. Header, Lefthand nav, Content, a sidebar and a footer. So far i have everything done besides the content/sidebar relationship. For the desktop site the green sidebar floats inside the content area and to the right and when the sidebar ends the content wraps around it. On the mobile site the sidebar moves below the content. The issues i am having are getting this to happen. I can get it to float left without the wrap and then move below the content but getting the content to wrap the sidebar as well is proving troublesome. Any pointers?
what about this approach;
Please note that the following excerpt is not completed, but it gives you hopefully a good idea:
For the desktop-version:
In order to display the sidebar in the content section properly, the best you could do is to absolute-position the sidebar-section. Like this:
#content {
position: relative;
}
#sidebar {
position: absolute;
right: 0px;
top: 0px;
}
Above code requires that "sidebar" is wrapped by "content" which will cause problems with the following piece of code:
Smartphone / tablet support: To stack all sections nicely on a smartphone:
#media screen and (min-width: 0px) and (max-width: 900px) {
#navigation, #content, #sidebar, #footer {
width: 100%;
float: left;
clear: both;
border-top: 1px solid #ccc;
margin-top: 20px;
background: none;
position: relative;
}
}
Now, our final problem is the fact that "sidebar" is still wrapped by "content".
Couple of approaches to solve this issue;
Use JavaScript to move the #sidebar to and from another block based on the screen width.
What about introducing a second sidebar-section such as #sidebar-mobile which is only visible when you are on a mobile device. Obviously, in that case, the first sidebar will be invisible.
This is your code for content area.
<div id="content">
<div id="sidebar">
sidebar
</div>
content
</div>
<div id="footer">footer</div>
Here is the css for desktop and device as well.
#content {background:yellow; padding:20px;}
#content p{ margin:0;}
#sidebar {background:green; float:right; padding:10px; margin:0 0 10px 10px;}
#footer{background:#2AABE4;}
#media only screen and (max-width: 420px) {
#sidebar{ float:none; margin:0;}
}
Now we have to use the little bit part of jquery to place the side between #content and #footer in device. Here the code for jquery.
function setlayout(){
//alert($(window).width())
if( $(window).width() < 420 ){
$('#sidebar').insertBefore('#footer');
} else {
$('#sidebar').prependTo('#content');
};
};
$(window).on('resize load', function(){ setlayout() });
Above code will work on window resize and window load as well.
When you will resize you browser below 420 it will move the div. You can modify the width as per your requirement.
For working example visit below link. http://jsfiddle.net/rakeshpersonal/hknBb/
You can (ab)use CSS display:table to effectively rearrange divs using just CSS without any Javascript.
Use your initial formatting for the "desktop" view.
In the mobile view (which you can activate by a CSS3 media query), apply display: table to a wrapper around everything else on the page (or directly to the body tag). Then, use display: table-footer-group to push the sidebar and footer to the bottom, and use float: none to remove their float properties.
The following is based under the presumption that your html is like this.
<div id="content">
<div id="sidebar">
</div>
</div>
For desktop:
#sidebar {
position: absolute;
right: 0;
top: 0;
}
For mobile:
#sidebar {
position: relative;
margin-top: 16px;
}
you probably need to have position relative for content, for it to work, but if not there is likely other solutions
#content {
position: relative;
}
I'm using a Boostrap sample to create a sticky footer for a web site using CSS, this all works fine the footer remains in place at the bottom of the page as the page is resized.
On a number of pages I have content that needs to be shown practically full page, barring the footer. The content section of the page therefore needs to be set to 100% height so its content in turn can be sized to full height.
Here's a JSFiddle that demonstrates the problem.
How can we make the green container div full height, so it touches the page top at the top and the top of the footer at the bottom?
Thanks!
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
<p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
#wrap .container {
background-color: lightgreen;
}
/* Sticky footer styles */
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason.
http://cdpn.io/IJHxf
This is essentially where I got the answer from, and they explain it way better than I ever could.
http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
When you implement that answer though, what I found height: auto !important; is the culprit as to why it doesn't immediately work. Comment it out in your #wrap id to see it take full effect. The code pen has additional changes to really see what is going on. What you really need to make your original question work is
#wrap .container {
background-color: lightgreen;
min-height: 100%;
height: auto; /* this line takes care of "more than enough content problem" */
}
html, body {
height: 100%;
background-color: #dedede;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
/* height: auto !important; */
height: 100%;
margin: 0 auto -60px;
}
Actually, what you could do, and would make more sense is instead of commenting out the entire line height: auto !important; You could just take off the !imporant. For example
#wrap {
height: auto !important;
/* changed to */
height: auto;
}
I changed some colors around to make it more apparent what was really happening. You'll see that in the codepen. There are lots more comments in the code pen to see what I really did FYI.
Also, I found that your sticky footer gave my page a scroll bar because of the margin. For me, I got rid of the scroll bar with the code below.
margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;