#header,
#main,
#sidebar,
#footer {
background-color: black;
display:inline;
position:relative;
float:left;
}
#header,
#footer {
width:100%;
height:25%;
}
#main {
width:68%;
height:50%;
margin-right:2%;
}
#sidebar {
width:30%;
height:50%;
}
....
<body>
<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
hi,this code snippet shrink content when windows minimized. my wanted result is that when minimized it, the browser just have a scrollbar and the content will not move on to their place.thanks
Haven't tested it with your code, but maybe setting min-width on body will do it.
body {
min-width: 1170px;
}
1170px could of course be something else.
Related
I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
As the title says. i really can't figure out what is wrong in this.
the #main div goes down if it's content is overlapping it's width.
this is the html file with the css style in it:
<html>
<head>
<style>
#header,
#main,
#sidebar,
#footer {
display:inline;
position:relative;
float:left;
background-color:#eee;
}
#header,
#footer {
width:100%;
height:60px;
}
#header {
margin-bottom:2%;
}
#footer {
margin-top:2%;
}
#main {
width:68%;
height:50%;
margin-right:2%;
}
#sidebar {
width:30%;
height:50%;
}
</style>
</head>
<body>
<div id="header">Header </div>
<div id="main"> content goes here.</div>
<div id="sidebar">Sidebar</div>
</body>
</html>
tried on IETester software all versions worked but IE7. It doesn't load anything. Thanks in advance.
I try to build a layout with 2 floating DIV´s on higher resolution and without floating on small resolution. One (subnavigation) with a fixed width and one (content) with a max-width.
here is an example code of the HTML:
<div id="subnavigation">
lorem ipsum...
</div>
<div id="content">
lorem ipsum...
</div>
and here the CSS:
#subnavigation {
float:right;
width:320px;
}
#content {
max-width:730px;
}
#media only screen and ( max-width:800px ) {
#subnavigation, #content {
float:none;
width:auto;
}
}
My problem now is that I need the subnavigation below the content without the float. Have someone an idea?
I tried a little bit with the calc() in CSS to get a fixed width for the content (to be able to float that), but it doesn't really work on my android-phone.
You could possibly use some negative margin sorcery.
Heres one way to approach it (probably a bit overcomplicated)
HTML
<div class="page">
<div class="content-wrapper">
<div class="content">
..content..
</div>
</div>
<div class="sidebar">
..content..
</div>
</div>
CSS
.page {
width:1050px; /*320px + 730px*/
max-width:100%;
margin:0 auto;
background:grey;
}
.content-wrapper {
float:left;
width:100%;
}
.content {
margin-right:320px;
background:orange;
}
.sidebar {
float:left;
width:320px;
margin-left:-320px;
background:green;
}
#media (max-width:480px) {
.content-wrapper {
float:none;
width:auto;
margin-bottom:20px;
}
.content {
margin-right:0;
}
.sidebar {
float:none;
margin:0;
width:auto;
}
}
Fiddle: http://jsfiddle.net/Varinder/vV4LT/
Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}