I've designed a website as you can see below, which has a FIXED header (white), then a sub-header, main content, sidebar (red) and a footer (grey).
I have created the wireframe for the website in HTML/CSS, but can't get the sidebar to work properly.
I would like the sidebar to start on the sub-header and go all the way to the bottom of the page to end after the footer (see the image below) no matter how much content there is in the main section, but I can't get it to work.
Please help! Here is my current efforts on JSFIDDLE, as you can see the sidebar doesn't go to the bottom of the page: http://goo.gl/EQ7CJh
Remove the position: relative from content div and use margin-top to position the panel, as shown:
#content {
height: 100%;
}
#sidebar {
border: 1px solid skyblue;
width: 100px;
position: absolute;
margin-top:7em;
top: 0px;
right:0px;
bottom: 0px;
}
Updated jsfddle
Can you try this jsFiddle http://jsfiddle.net/2ZhpH/1093/
I have changed the HTML structure and added the #sidebar css to this
#sidebar {
position:absolute;
top:48px;
border: 1px solid skyblue;
width: 100px;
position: absolute;
right: 0;
bottom: 0px;
}
Demo
If you want to have side bar to the side of The div which contains sub-header main and footer the you should have a Grid structure like this
<div id="header" class="...">
</div>
<div class="divide"> <!-- divide class to have like 85% width leaving rest of it for side bar -->
<div class="sub-header">
</div>
<div class="main">
</div>
<div id="footer">
</div>
</div>
<div class="sidebar">
</div>
Related
I have tried many different methods mentioned here and elsewhere on the web, but none of them do what I want it to achieve.
I currently have elements on a webpage positioned and styled with the code below. Then below that, I have a footer div that I want to be at the bottom of the page content (see attached images). If the content height is less than the screen height, I can either have the footer at the bottom of the screen or directly under the content (both work). If the content is larger than the screen, I want the footer to be at the bottom of the page content, so that when the user scrolls down they see the footer.
Right now, My bottom-sec div is the footer (not the one that actually has id footer), but it is sticking to the bottom of the viewport, not to the bottom of the content. So, if the content is greater than the screen, the footer overlaps over the page content.
I think it may be because of the position: relative in the indiitem divs, however I need them to be there for the rest of the page to work.
Here's my code
.items-container {
margin-left: 45px;
margin-right: 45px;
display: flex;
flex-wrap: wrap;
position: absolute;
}
#bottom-sec {
position: fixed;
bottom: 10px;
width: 100%;
}
#footer {
margin: 20px;
margin-top: 0px;
display: flex;
flex-wrap: wrap;
}
#footer > div {
margin: 35px;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="items-container">
<div class="indiitem" style="position: relative;">
<div class="list-item">
<img src="https://imgur.com/c3cv6SW.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
The_Tiger_Shirt
<h5 style="font-size: 13px; margin: 0; padding: 0;">$1000</h5>
</div>
</div>
<div class="indiitem" style="position: relative;">
<div class="list-item">
<img src="https://imgur.com/nIZxLpA.png" class="item-thumbnail" style="position: relative, padding-bottom: 0vw" id="product-img">
Basic_Hoodie
<h5 style="font-size: 13px; margin: 0; padding: 0;">$50</h5>
</div>
</div>
<div id="bottom-sec">
<hr style="width: 170px; text-align: center; margin-top: 50px;">
<div id="footer">
<div id="links">
<h4>M_E_N_U:</h4>
A navbar is supposed to be here--took up too much space so it isn't included
</div>
<div id="mailform">
<form method="POST" action="/shop" id="enter_email">
<input type="text" name="email" id="email" required>
<input type="submit" value=">>>>" id="emailpost">
</form>
</div>
</div>
When I tried position: absolute on my 'bottom-sec' div, would be at the bottom of the viewport, overlapping with my content, but if I scrolled down, it stayed in the same position in the middle of the content.
When I tried removing the position or position: relative, the footer completely ignored the page content and moved up to be right under my header.
Any help would be appreciated!
You need a set height into body,html tag.
Then you need a absolute position into #footer tag
For example like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* adjust to footer height */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
One of the simplest and cleanest ways without having to mess with too many display modes is by taking advantage of flexbox. It's really simple, I wrote an article explaining it in depth here:
It's geared towards bulma but in the last paragraph I also share how this would work without a framework like bulma. There is also a codepen that you can open and edit. If you need any help, let me know :)
I'm trying to create a footer that stays below the page content and sticks to the bottom of the page. I've tried applying Twitter Bootstrap 3 Sticky Footer to my page, but it causes the footer to stick to the bottom and overlap the page content (if the page is too short).
I'm currently using the css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 348px;
}
and the html: (simplified)
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container"
page content
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<!-- Footer-->
</footer>
</body>
and the footer is now sticking to the bottom, but when the page is very narrow, you can see through to the background instead of the footer background covering it.
Image
Any help in resolving this would be greatly appreciated.
Seeing that you have used jQuery. Along with removing the height from footer, a simple resize() event can decide the correct margin-bottom.
$(window).resize(function(){
var xHeight = $('.footer').height();
$('body').css('margin-bottom',xHeight + 'px');
})
Hope this helps
Problem is with the height. Just remove the height from footer then it will be fine.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 348px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
<!----html---->
<body>
<!-- Navigation -->
<div class="wrapper">
<div class="container">page content</div>
</div>
<footer class="footer navbar-fixed-bottom"></footer>
</body>
I must start off by saying I'm on a HUGE learning curve with this, and the website project is in my spare time as a present to somebody, so my knowledge is limited, although I think I understand the basics.
ALSO please note that I do have another more basic, less interesting site which is already built as a back-up so I won't be broken-hearted if I'm told all my code is rubbish and I need to start again!
I'm creating a one-page, horizontally-scrolling portfolio site for a make-up artist, which requires me to have a fixed banner with my menu listings on the left hand side, and with javascript, the page scrolls nice and smoothly to the relevant section.
Everything looks great on my screen resolution, with my browser at the right size, but I've noticed that if I shrink the browser window down, the fixed navigation banner starts to scroll out of place, while everything else stays together as it should.
The end result should be that everything stays in its place, with the only 'moving part' being the content on the scrolling section, so when the browser is resized, everything either re-sizes or at least scrolls together.
I've played around with wrapping everything in a content div and I've experimented with different positioning, but nothing seems to be working.
Here's my basic html layout for the sections:
<html>
<body>
<div id="banner"> <!--this is the fixed nav banner-->
<ul>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
<!--IMAGES GO HERE-->
</div>
</div>
<div id="about" class="panel">
</div>
<div id="testimonials" class="bigpanel">
</div>
<div id="contact" class="bigpanel">
</div>
<div id="footer">
</div>
</body>
</html>
...and the CSS:
body {
width: 15000px;
height: 580px;
background-color: #fcf4f1;
position: absolute;
margin: 2% 0 5% 0;
}
#footer {
position: fixed;
left: 935px;
top: 645px;
margin: 10px;
}
#banner {
position: fixed;
height: 580px;
width: 200px;
background-color: #fff;
opacity: 0.8;
line-height: 20px;
margin: 45px 0px 0px 20px;
padding: 0;
z-index: 999;
}
.panel {
width: 930px;
float: left;
padding-left: 242px;
padding-right: 1040px;
margin-top: 45px;
}
.bigpanel {
float: left;
padding-left: 242px;
padding-right: 1040px;
margin-top:45px;
}
Pic of how the site is at the correct size
...and a pic of how it looks when it's squished in height!
I've tried to be as thorough as possible so sorry for the long one!
Any help would be greatly appreciated.
Ok, I don't know whether I have the answer that will work for everyone but it certainly has for me.
I basically had a long look at how I'd defined the widths and heights for basically all elements in my website and worked out that although the widths needed to be fixed for the main body and the banner, the height could be responsive depending on the viewport size.
I wrapped everything in a very wide wrapper div, with a height set to 100%, but set the body height to 84vh, with a max-height of 700px (so my images can have the same max-height and always look good).
This way I could also set the banner to height: 84vh with a max-height of 700px so it never overflows, but always sizes down.
I set the margin for my wrapper to centre it vertically, and now whilst everything fits inside its containers, there's no vertical scroll!
I'm sure a lot of it is an ugly solution, caused by my bad coding but it works now!
I thing you have to play with the top poperty on you #banner div by putting it to 0. This work only with positions like fixed, absolute, relative, etc. What it will do is to fix you div at the top of your browser window, no matter what. It is the "top padding" (disantce) you div will have relativly to the to of the screen.
So you should just add
top: 0;
to
#banner
and it should work!
If you want an exemple of it's efficacity, I recommend you to look at this codepen: http://codepen.io/Symsym/pen/LsjCK
Cheers! and tell me if it works.
<body>
<div class="banner"> <!--this is the fixed nav banner-->
<ul>
<li>PORTFOLIO</li>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div class='content'>
<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
<!--IMAGES GO HERE-->
</div>
</div>
<div id="about" class="panel">
about
</div>
<div id="testimonials" class="bigpanel">
testimonials
</div>
<div id="contact" class="bigpanel">
contact
</div>
</div>
<div class="footer">
footer is here!!
</div>
css code:
body {
background-color: '#fcf4f1';
overflow:hidden;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.banner {
position: fixed;
width: 200px;
background-color: '#ccc';
opacity: 0.8;
padding: 0;
z-index: 999;
top:20px;
left:0;
}
.content{
width:800px;
margin-left:200px;
overflow:auto;
float:left;
}
.panel {
margin-top:10px;
width: 930px;
float: left;
}
.bigpanel {
float: left;
margin-top:20px;
}
.footer {
position: fixed;
bottom: 0;
left:0;
right:0;
background:red;
margin: 10px;
}
you can scroll on content.
I am trying to achieve a a horizontal scrolling website with a fixed header and footer.
Goals:
1. Fixed Header and Footer
2. No vertical scrolling
3. Content div fills all space between the header and footer
I used position: absolute on the content to make sure the height:100% takes up the area between the header and the footer. (my third goal)
However this also causes a vertical scrollbar to appear.
live demo:
http://jsfiddle.net/wQ2XR/230/
how can i achieve my goals without a vertical scrollbar to appear?
thanks a lot in advance!
The html code:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="2">
<div id="b">
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
</div>
</div>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
the css:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
}
header {
}
#a {
position: fixed;
height: 50px;
top: 0;
width: 100%;
background-color: blue;
}
#2 {
position: relative;
padding: 50px 0 25px 0;
}
#b {
height: 100%;
position: absolute;
}
#bb {
position: relative;
height: 100%;
margin: 50px 0 0 0;
width: 2000px;
background-color: yellow;
}
footer {
}
#c {
position: fixed;
height: 25px;
bottom: 0;
width: 100%;
background-color: green;
}
Hmmm, the problem is that the wrapper(s) around your content between the header and footer are taking on the height of the viewport with height:100%. So, when you apply a margin to vertically offset those content wrappers (so that the header becomes visible), they get pushed by that much below the viewport (50px, height of the header). As a result, you get a vertical scrollbar, since the content wrappers are both the full height of the viewport and pushed down - so they can't fit on-screen.
How to avoid this? Well, if your footer and header height won't be dynamic (ie. You'll always be in control of how tall they are through your CSS), you can achieve this in a fairly straightforward manner with position:absolute.
Your structure I modified slightly; I removed the #2 and #b elements, since it looks like they were just there to properly position/size #bb, the actual content-containing element:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
Now, with your CSS, I removed the definitions for styling #2 and #b. Additionally, I modified the #bb CSS to read as:
#bb {
position: absolute;
top: 50px;
bottom: 25px;
width: 2000px;
background-color: yellow;
}
Here's an updated JSFiddle to demonstrate what this achieves. Additionally, here's a JSFiddle implementing your multiple-row layout which you gave as a comment in one of the answers.
The reason why overflow:hidden doesn't quite work is because #bb would actually still extend below the viewport - just, no vertical scrollbar would be created because that overflowing region is ignored by the browser. However, when you use a percentage height, it becomes apparent that the height of #bb is not that which is visible. Anyways, hope this helps out! If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
To hide the scrollbar use:
overflow: hidden;
However, the text needs to go somewhere (otherwise it will be hidden), so you need to have the container larger or use text-columns.
Do you intend to achieve something like Windows 8 Metro UI for the scrolling?
Here is the html:
<div id="terms" class="terms">
<center>Terms & Conditions
</div>
CSS:
# terms {
width: 100%;
position: absolute;
bottom: 0;
}
.terms {
width: 100%;
position: relative;
bottom: 5px;
}
WHAT AM I DOING WRONG? I have tried probably 50 different variations of html and css to get the terms to stay on the bottom of the page, but it is floating around in the center of the page. it will go from the top to the middle to the right and left but i cannot get it to float to the bottom of the page! the entire page is set up as two floating columns .right and .left
PLEASE HELP!! thank you!
I've set up a fiddle for you:
http://jsfiddle.net/uh53X/1/
Modify your code as follows:
HTML
<div class="terms">
<center>Terms & Conditions</center>
</div>
CSS
div.terms{
display:block;
position:absolute;
bottom:0;
right:0;
width:100%;
background:#eee;
border:1px solid #ddd;
}
Hope this helps.
please refer to the below demo
CLICK HERE FOR DEMO
HTML
<div class="wrapper">
<div id="terms">
<center>Terms & Conditions</center>
</div>
</div>
CSS
.wrapper{
width:500px;
height:500px;
}
#terms {
position: fixed;
bottom:5px;
width: 100%;
left:0px;
height:25px;
}
UPDATED AS PER THE COMMENT:
CLICK FOR DEMO 2
HTML
<div class="wrapper">
<div class="pageBox">
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
</div>
<div id="terms">
<center>Terms & Conditions</center>
</div>
</div>
CSS
.wrapper{
width:500px;
}
.pageBox{
height:auto;
}
#terms {
width: 100%;
height:25px;
}
Do you want to stick the footer to the bottom of the page regardless of how much content you have in it? - sticky footer, this is what I use for when I want to anchor my footer to the bottom (although from the look of your example pages it might not be what you're after)
or do you just want to make sure it sits underneath the last item in your page? why not just add a clearing div/br underneath your last item and before the terms
.clearboth {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
<br class="clearboth" />
Then regardless of floats on either side you can just have your div sat underneath that as a regular item
Hope either of these helps