I managed to make my footer to stick to the bottom of the window, then avoid my content div... but now, it's overlapping for about 15px before dropping below.
I want the footer to drop, but to never overlap the content. I think it may have something to do with my margins, but my tweaking has not yet solved this.
Any suggestions?
Adding margin-bottom:15px doesn't seem to help, because it's only shown once the footer overlaps enough to push the footer down. Then the margin is shown, but not before that small amount of overlap.
The #push div is supposed to make this all possible, from what I understood on Twitter's bootstrap example.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
min-width: 900px;
}
.main_nav {
list-style-type: none;
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#bio_content {
width: 700px;
min-height: 445px;
margin-bottom: 15px;
float: left;
}
#bio_text {
padding: 10px;
}
#push {
height: 50px;
}
#footer {
height: 50px;
width: 100%;
float: left;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
I thin it's a float issue. A fiddle would help diagnose this better. I would suggest doing this
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div style="clear:both"></div> //add this to clear the bio_content div
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
You need to clear the styles in your footer. Add a clear:both to your footer css.
#footer {
clear: both;
height: 50px;
width: 100%;
}
Related
I have 2 columns and a footer. One of the columns is much smaller in content than the other, but I need them to match so both of their background colors run all the way to the footer. It isn't a problem for the larger one, but not the other.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: left;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
}
.cf {
clear:both
}
/*clearfix hack*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>
Make the midden container a flexbox container
.midden { display: flex;}
You can either flex the midden div. OR, if you want to preserve your HTML structure, you can set fixed heights on both of your children. See the CSS changes I made below.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: right;
height: 150px;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
height: 150px;
}
.cf {
clear:both
}
.container {
height: 100vh;
width: 100%;
}
<div class="container">
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>
I have a sidebar with some lists. Each list is preceded by a title bar div. The sidebar has a fixed width and overflow-x: auto. Lists content can overflow, making the parent sidebar to show the scroll bar.
The issue is that the title bar div doesn´t expand when the scroll bar appears. I would like either, don't move it when scrolling or to expand the 'div' to fit the extra space generated by the scroll bar: JS Bin
Is it possible to resolve this issue using CSS?
May be its possible with CSS, but in my opinion, you will need to use some JavaScript to fix this issue:
Here is the trick:
var sidebar = $('.sidebar');
sidebar.scroll(function(e) {
sidebar.find('.title').css({
marginLeft: sidebar.scrollLeft()
});
});
We will add some margin-left on the .title elements equal to the number of pixels of horizontal scroll. This will always show the title bar stick to the right of the scroll able element.
$(function() {
var sidebar = $('.sidebar');
sidebar.scroll(function(e) {
sidebar.find('.title').css({
marginLeft: sidebar.scrollLeft()
});
});
});
.sidebar {
overflow-x: auto;
width: 160px;
height: 195px;
background-color: lightgrey;
padding-top: 20px;
}
.title {
width: 100%;
text-align: right;
background-color: grey;
}
.list {
margin-top: 20px;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<div class="title">
Title
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="title">
Title2
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
</div>
Please find the solution below with CSS only.
.sidebar {
overflow-x: auto;
width: 160px;
height: 200px;
background-color: lightgrey;
padding-top: 20px;
overflow-x: scroll;
}
.title {
width: 160px;
text-align: right;
position: fixed;
background-color: grey;
}
.list {
margin-top: 30px;
white-space: nowrap;
float: left;
}
.clear {
clear: both;
}
<title>
JS Bin
</title>
<body>
<div class="sidebar">
<div class="title">
Title
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="clear">
<div class="title">
Title2
</div>
<ul class="list">
<li>
This is a very long long line
</li>
</ul>
<div class="clear">
</div>
</body>
I'm trying to make the header and footer background to be 100% but all the content in the page to be 1200px and centre the page.
So far I put width:1200px in the html, body sure that centre the page but it fixed width the background which I don't want to happen.
Also I've been trying to fix the navigation as well to be positioned on the right and align to the logo.
html,body{
background: #fff;
width: 1200px;
}
.container{
min-height: 100%;
margin: 0 auto;
}
header{
background: #363636;
color: #fff;
padding: 30px;
margin: 0 auto;
}
.logo{
float: left;
clear: both;
display: block;
}
nav{
float: right;
}
<div class="container">
<header clas="main_header">
<div class="logo">
<h2>LOGO.COM</h2>
</div>
<div class="clearfix"></div>
<nav class="main_nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
<li>Get a Quote</li>
</ul>
</nav>
</header>
.....
</div>
Don't restrict the width of the HTML or body...restrict the width of the container.
html,body{
background: #fff;
}
.container{
width: 1200px;
margin: 0 auto;
}
If an element needs to be wider than the container just close one .container add your wider element and open a new .container.
Codepen Demo
I'm not sure where my code is messed up, but I'm trying to get my code to center. Here is what I have so far:
The problem that I am running into is that the page won't actually center. When it loads, the left margin is only a 10px. I'm sure there is a conflict somewhere, or I just borked something, and I've been searching for hours now, and have found nothing. Here is the following code:
body {
background-color: #12121D;
}
#contain {
display: block;
width: 1000px;
margin: 0 auto;
}
.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}
#header {
width: 1000px;
height: 230px;
}
#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
}
#banner {
text-align: right;
float: right;
z-index: -1;
}
#menu {
height: 80px;
margin: 0 auto;
}
#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
}
#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
}
And the html follows as:
<body>
<div id="contain">
<div id="header">
<div id="logo"> <img src="images/logo.png" alt="logo" />
<br />
<a class="version" href="JavaScript:changeSheets(1)">View Mobile<a/>
</div>
<div id="banner"><img src="images/banner.png" alt="banner"/></div>
</div>
<div id="menu">
<div class="pages">
<ul>
<li>Front Page</li>
<li>Reviews</li>
<li>Releases</li>
<li>About Me</li>
<li>Contact Info</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
<h1>Why am I doing this?</h1>
<br />
Insert text here
<h1>What is my goal?</h1>
Insert text here
</div>
</div>
</div>
</div>
</body>
Hi there is Your code:
http://jsfiddle.net/w9Zgc/2/
On my screen larger 1920px page is centered. I think that you have screen resolution close to 1024px width so than left margin left equal 10px is quite reasonable. Another advice is to reset padding and margin of body
body, html {
padding:0;
margin: 0;
}
One thing that will help you center a div is to specify the width, and then set the right & left margins to auto:
#main{
width: 850px;
margin-left: auto;
margin-right: auto;
}
Judging from your link at http://jsbin.com/itiwez/2/edit
I removed #charset "utf-8" in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format?
FYI: Why specify #charset "UTF-8"; in your CSS file?
I'm using the 960.gs frameowrk and http://www.cssstickyfooter.com and want to have a separate back ground colour for the main content div. This div won't stretch the background to the bottom of the page.
HTML:
<div id="wrapper">
<div id="content" class="container_12">
<div class="grid_12" id="header"><img src=logo.png" alt="" width="145" height="160" border="0" /></div><!--header-->
<div class="clear"></div>
<div class="grid_12" id="navbar">
<ul>
<li>Home</li>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div><!--navbar-->
<div class="clear"></div>
<div class="grid_12" id="content_body">
<div class="grid_4" id="sidebar">
sidebar left
</div> <!--sidebar-->
<div class="grid_7" id="body_right">
body right
</div> <!--body_right-->
</div> <!--content_body-->
<div class="clear"></div>
</div><!--content-->
</div> <!--wrapper-->
<div id="footer"> footer </div> <!--footer-->
CSS:
html, body, #wrapper {height: 100%;}
body > #wrapper { height: auto; min-height: 100%; }
/* must be same height as the footer */
#content { overflow: auto;
padding-bottom: -1.5em;
}
#footer {
position: relative;
margin-top: -1.5em; /* negative value of footer height */
height: 1.5em;
clear: both;
}
/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
content: "";
height:100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J */
}
body {
min-width: 960px;
background: #E9F2F9;
}
div#header{
background-color: #3399cc;
}
div#navbar {
background-color: #FF9900;
}
div#navbar LI{
margin: 0 auto;
display: inline;
padding-right: 5px;
}
div#content_body{
background: #9CC4E4;
}
You have a div class="clear" but clear isn't defined in your CSS - you need to specify "clear:both" in a .clear CSS class.