So I got this website where everything were lined up perfectly, the header, body footer etc. Past week I tried to add a sidebar and I realized that it pushed my main content down.
So many question is, how can I make the margins/height of my sidebar independent of my main content? (Posted CSS code below)
DEMO:
Edit: http://oldtimesdaily.tumblr.com/
my tumblr with code. How it looks right now. The absolute position worked, the main content is back at top. But now all contents of my sidebar are jammed together, I guess absolute positionen removes all margins? What should I use instead to position the different contents on my sidebar?
#quote { /*style for quote division*/
position:relative;
width:375px;
height:70px;
border:1px solid black;
font-family:sans-serif;
font-size:95%;
padding:3px;
background-color:lightyellow;
}
#auth { /*style for quote author, if any*/
position:absolute;
bottom:3px;
right:10px;
}
#sidebar { /*editable*/
background: url('http://s10.postimg.org/uag5u79d1/vline.png') repeat-y left center;
background-color: white;
width: 260px;
position: relative;
top: 700px;
left: 55%;
}
#sidebar .sTitle {
padding: 0 0 10px 0;
position: relative;
margin: 0px 20px 0px;
color: #222;
font-size: 15px;
line-height: 1;
font-family: QuicksandBold, Helvetica, Arial, sans-serif;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
border-bottom: 0px;
}
#sidebar .Categories {
font-size: 11px;
text-align: center;
padding: 3px 5px;
margin: 50px;
}
position: absolute;
will make the sidebar independent of the rest of the page
Related
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
So im fully aware of the amount of questions asked about "Sticky Footers", and have also referenced many, MANY different questions on here and websites about sticky footers. I've created a fresh template away from this project that work and have examples of how sticky footers operate, be it inside the wrapper or out...
However, i just cant seem to get it operate correctly within my solution.
Currently the footer appears to be "sticky", however on one of my main pages, the content (images and text) seem to overlap the footer, due to the footer not being pushed to the bottom correctly. It seems to sit just below the screen (Meaning you have to scroll slightly to see the footer) - But on this page it sits in that location, doesnt get pushed down and then the content overlaps.
I've tried everything, Removing 100% on HTML, BODY, WRAPPER, contentDiv, but basically, one thing works, which breaks another.
What im after is, ContentDiv = 100% (pushing down the footer). So i should be able to create a blank page, the footer be glued to the bottom, and if content increases it pushed it down... Simple right? But tearing out my hair with this :/
So, any help would be massively appreciated, as i have a short deadline to get this sorted.
Fiddle Demo
CSS
html
{ margin: 0px; padding: 0px; height:100%; }
body
{ margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
/* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */
p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
/* PAGE FORMATTING - START*/
span:hover { /* text-decoration: underline; */ }
a:link, a:visted { }
ahover, a:active { }
.link_nav_header{
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
}
.but_default
{
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
}
.but_events-buybutton
{
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
}
.but_all
{
min-width:90%;
cursor: pointer;
margin: 2px;
}
/* HEADER - START */
.hdr_container
{
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
}
#hdr_profile-icon {
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
}
/* NEW NAVIGATION */
#nav {
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
}
#nav ul {
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
text-align: center;
}
#nav ul li{
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
}
#nav li a {
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
}
#nav li:first-child a {
background: red;
width: 10px;
font-weight: normal;
}
#nav li a:hover {
/* color: #c00; */
background-color: #0099ff;
}
#nav a:hover a:focus {
/* color: #c00; */
background-color: red;
}
/* MAIN CONTENT - START */
#wrapper {
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
}
.contentDiv
{
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
}
/* TABLE - START */
.tbl_container-centered
{
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
}
.tbl_containerpaneltext-centered
{
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.tbl_head-genericthread
{
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
}
.tbl_events-head {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
}
.tbl_grid-events
{
background-color: #ffffff;
}
.tbl_pickseats-famtable
{
width:100%;
background-color:#e1e1e1;
}
table#tbl_events{
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
}
.link_moreinfo{
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
}
#event_row {
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#basket2 {
background: red;
}
/* FOOTER CSS - START */
.footer_container
{
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
}
.footer_container, .wrapper:after {
/* .push must be the same height as footer */
height: 75px;
}
.wrapper:after {
content: "";
display: block;
}
.footer_global-bottom {
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
}
.footer_global-bottom a {
color: white;
text-decoration: none;
}
/* ERROR HANDELING */
.error {
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
}
.success
{
background: #74e963;
border: 1px solid #59e836;
text-align: center;
}
.alerts_box {
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
}
.alerts {
width: 275px;
z-index: 2;
padding-bottom: 40px;
}
have you considered using this piece of code:
.footer_container {
position: fixed;
bottom: 0;
z-index: 100;
}
If you want full content being visible you can add to wrapper something like this:
margin-bottom: (footer-height)px;
Or use padding-bottom instead of margin-bottom.
in your #wrapper rule-set change height:100% to height:auto and remove min-height:100%.
jsFiddle
#wrapper {
clear: both;
width: 100%;
height:auto;
z-index:10;
}
I believe that setting the height to 100% is setting it to 100% of the browser window, not 100% of the content. I could be wrong about that though.
This will place the footer at the end of the content. On pages where the content is less than the height of the window, you can wrap the footer and give the footer wrapper a class like this:
.minContentFooter {
position: absolute;
bottom: 0;
}
If the case is that the content is loaded dynamically and you don't know if it will fill a browser window, then you will need a bit of javascript to have it both ways - either at the bottom of the content or the bottom of the window when there is minimal content.
Problem was solved, not by CSS, but by Javascript.
The problem was due to the page loading dynamic content from a table, it never knew how big the contentDiv was, so didnt know where to but the footer.
The sticky footer is achieved by setting CSS % heights, and also using javascript to help correct for pages with no content or those with dynamically loaded content.
The code below explains the active javascript:
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight) {
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
} else {
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
}
The code checks the height of the header and the content contained within the content and if its over the footer switches to a css class enforcing min-heights rather than heights to allow the footer to flow to the end of the content.
Many Thanks for everyone's help.
I've googled and read just about everything I can find on making a "sticky footer" but for some reason I just can NOT get it to work correctly. Here's my CSS code for the html/body div, main content div and my footer div:
body, html {
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
height: 100%;
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial;
font-size: 1em;
color: #666666;
background-color: #EDF5FC;}
#main {
position: relative;
top: 380px;
width: 90%;
height:100%;
min-height: 100%;
margin: 0px 5% -20px 5%;
z-index: 10;
padding-top: 0px;
padding-bottom: 20px;
overflow:scroll;}
#footer {
clear:both;
position:fixed;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top: -20px; /* negative value of footer height */
width:98%;
height:20px;
padding-top:3px;
background: #0E28B1;
text-align: center;
color: #ffffff;
font-size: .7em;
font-weight:bold;
z-index:1;}
My Footer Div is outside my Main div (the main content of the site is inside the main div, then I close it and have the footer div.) I can get it to stick at the bottom by using fixed position and margin-bottom: 0, but then I get no scroll bar for my content.
This is not working at all. What am I doing wrong?
I finally found a solution that works for me! I found this website: http://boagworld.com/dev/fixed-footers-without-javascript/ and modified the code just a tiny bit so that my footer text is nicely centered both vertically and horizontally, and added my top of page height in the main (content) div. I guess this won't work correctly without the third "#Wrapper" div enclosing everything - so now here is my wrapper, main and footer css for those having the same problems:
#wrapper {
display: block;
position: absolute;
min-height: 100%; }
#main {
display: block;
top: 400px;
width: 90%;
margin-bottom: 20px; }
#footer {
position: fixed;
display: block;
bottom: 0;
height: 20px;
background: #0E28B1;
width: 98%;
margin-right:auto;
margin-left:auto;
font-size: .7em;
font-weight:bold;
font-family: Cooper Black, Copperplate Gothic Bold, Britannic Bold, Garamond, Arial;
color: #ffffff;
text-align:center;
z-index:2;
padding-top:3px;}
I had to make the z-index in the footer 2 instead of 1 to keep the footer on top of the content text. But now it works. I had searched SO many websites (including this one) before I found this solution, so I hope this helps someone.
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;
I'm writing a small website to learn HTML and CSS and I'm having trouble getting my content to scroll in any direction.
When the browser window is resized to the point where any of the content cannot fit, instead of allowing a scroll, it just disappears. The Login button's div is supposed to appear 950px from the left. Meaning that if the browser window is smaller then that, it will allow you to scroll over, right?
And the News box will display any content written until it reaches the bottom of the browser window. Then it won't scroll or display.
Any suggestions?
The HTML is here is here and the CSS is here.
Your CSS has many position:fixed attributes in it. When an object's position is set to fixed, it will stay stationary, even if you are scrolling. Therefore, there was nothing that can move, so you couldn't scroll. Try changing your CSS to the following:
body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }
#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}
#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}
#boxes {
margin-top: 100px;
margin-left: 100px;
}
#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}
This will keep everything in the same position as it was, except the page can now scroll when the browser is resized to a point that it cannot display all its contents.