I've a page with a main scrollable div like this:
<html>
<head>
<style type="text/css">
#mydiv{
overflow: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="mydiv">content</div>
</body>
</html>
How can I have a fixed margin (for example 30px) at the bottom of the page?
The div can have a small or big height (depending on the screen size), but the margin should be fixed.
Thanks in advice
You can create another div either inside your existing or outside depending on how you want your page to layout. Then apply this style to the div #myftr { margin: 30px; }
Something like this.
http://jsfiddle.net/rhoenig/XxuvE/
you can simply define the margin-bottom in your css like this :-
#mydiv{
overflow: auto;
width: 300px;
border:1px solid red;
margin-bottom:30px;
}
or see the demo :-http://jsfiddle.net/XxuvE/4/
Related
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
I know it looks like a question that has been asked many times, but I just couldn't find the solution to that very specific situation.
Here's the basic wireframe of my layout :
Basically, I've got a few divs with different backgrounds that take 100% width and 100% height of the browser window. Within each and every of them is another div that takes 50% width of its parent but has a variable height, depending on its content.
I'd like all of these divs-within-a-div to be vertically align.
Now, I've read that putting a display:table-cell and a vertical-align:middle on the parent should work, but in this case it just seems to mess things up. :-/
My code:
<head>
<style>
html, body {
height: 100%;
}
body > div {
width: 100%;
height: 100%;
background-size: cover;
}
.centered {
width: 50%;
margin: 0 auto;
background: rgba(0,0,0,0.4);
padding: 50px 0 30px 0;
}
</style>
</head>
<body>
<div id="pic_1">
<div class="centered">content</div>
</div>
<div id="pic_2">
<div class="centered">content</div>
</div>
<div id="pic_3">
<div class="centered">content</div>
</div>
</body>
Thanks for your help!
Set a grandparent element to be display:table; height:100% and the parent element to be display:table-cell; vertical-align:middle.
See "Method 1" here for an example.
Also, note that your markup should not use class="centered"; use a semantic class name instead.
I want to create a webpage that has a fixed part at the bottom and, at the top, a part that will be filled dynamically with content, this dynamic part should have a scroll bar should the added content not fit, in order to stay above the fixed part.
style.css:
.action-box{
position: fixed;
bottom: 15px;
margin-top: 10px;
width: 100%;
}
index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<!-- this will be filled with content -->
</div>
<div class="action-box">
<!-- this is the fixed part -->
</div>
</body>
</html>
You can see in this fiddle that the two divs overlap.
How can I make the first div scrollable, so that it won't slide over or below the last div?
I'll propose using dynamic resizing, depending on window height:
Here is jQuery example:
function adjustBlocks() {
var winH = $(window).height();
var boxH = $('#action-box').height();
$('#content').height((winH - boxH) + 'px');
}
$(document).ready(adjustBlocks);
$(window).resize(adjustBlocks);
Sample HTML:
<div id="content"></div>
<div id="action-box"></div>
And sample CSS:
#content{
width: 100%;
background: #eee;
overflow-y: scroll;
}
#action-box{
width: 100%;
background: #ffccaa;
}
Of course, you can easily add any margins and mention them in jQuery resizing function.
Oh, and the example on jsfiddle
The easiest way is to apply margin-bottom to the div on top that matches the total height of the fixed div at the bottom, and you have to give the div at the bottom a height along with a background color so the other div doesn't show through.
.action-box{
position: fixed;
bottom: 0px;
height: 20px;
padding-bottom: 10px;
width: 100%;
background-color: white;
}
.content {margin-bottom: 50px}
http://jsfiddle.net/RdGXt/151/
Give it a css class with a fixed height and overflow: scroll;
I have a site that has the following structure:
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>
Now I have set html, body and page_wrapper to 100% in CSS. The goal here is to get the footer to be at either the bottom of the content or the bottom of the window -- whichever is visually lower. I've read a lot of things about how to do it, but I can't seem to get it to work correctly.
html, body, #page_wrapper { height: 100%; }
#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}
#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}
It sorta seems to work. But problem I am seeing is, that if I zoom out my page_wrapper seems to almost reset its height to 100% but as I zoom in, it gets shorter and shorter and shorter causing overlap in the footer and content text instead of pushing the footer down.
Any idea how to repair something like that? I'm at my wits end with it trying to google up an answer...
Updated my answer with a test html, works quite fine in chrome 13. I tried zooming in and out and the footer stays put.
You should put your footer outside of the page-wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of either the header or the content-wrapper to see the footer stick to the bottom of the page-wrapper instead of the browser window. If you open the html as is you will see the blue footer sticking to the bottom of the page and the page-wrapper taking up 100% of the window.
Please note that this is broken without a fix in Firefox 4 and 5. Also it doesnt work in IE 5.5 and earlier.
To make this work properly in IE6 add height: 100%; to #page_wrapper
<html>
<head>
<style type="text/css">
body, html {height: 100%;margin:0;padding:0;}
#page_wrapper {min-height: 100%; background-color: red;}
#header{height: 200px; background-color: green;}
#content-wrapper{height: 200px; background-color: yellow;}
#footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
</div>
<div id="footer"></div>
</body>
<html>
live example of this can be found on:
https://www.effacts.com/effacts/public?context=107
a proper sheet and html can be found here:
http://www.cssstickyfooter.com/
Does this help:
css sticky footer in an asp.net page
absolute position the footer div...
In #footer css try adding clear:both;
or
add in footer CSS right after position: relative; bottom:5px;
With position: relative you can actually use, top, right, bottom and left.
If you always want it at bottom you can put in as bottom:5px; If you want it at the bottom center then you can put in bottom: 5px; and right or left ...
5px above is just an example you can change pixel to as many as you want.
Furthermore, you can also have clear:both with it there as that clear make sure there is no other content that would override it.
I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>