I looked all over the internet for a solution to this problem, but I couldn't find a solution that fit my case. I am trying to make an IMG overflow on the left side of its container instead of overflowing on the right. I tried adding direction: rtl; but it did not work. Here is the pic of what I'm dealing with:
pic
Thanks in advance
A way, if you have information about your image height and width, is to set the image as a background and control its left value. You will need to set a negative value to the background-position-x, such that the overflow will appear that it is starting from left.
.img {
overflow: hidden;
background-repeat: no-repeat;
width: 400px;
height: 400px;
background-position-x: -322px;
background-image: url(https://i.stack.imgur.com/KyxiY.png);
}
<body>
<div class="img"/>
</body>
Or another, if you would like to use the img tag.
.img {
position: relative;
left: -144px;
}
.container{
overflow: hidden;
}
<body>
<div class="container"><img class="img" src="https://i.stack.imgur.com/KyxiY.png"/></div>
</body>
Related
I have the following attempt, trying to make a simple sticky footer.
My problem is the footer is not sicking to the bottom, I suspect it might be a css problem.
Would greatly appreciate it if someone can give the following code a scan and provide some advise.
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: absolute;
bottom: 0;
}
<footer class="footer" id="footer">
<div class="footLeft" style="width:75%; float:left;">
</div>
<div class="footerRight" style="width:25%; float:right; padding:25px;">
<button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
</div>
</footer>
The Problem Im having / Output
Add the following rules to body
body {
min-height:100%;/*or 100vh */
position:relative;
}
Explanation:
The min-height property will make sure that the body at least takes 100% of your viewport height. This way even if you have less content your footer will always stick to the bottom of viewport.
Position: relative rule is set so that the footer is positioned absolute relative to the body and not any other wrapper
You can just use this native class to achieve sticky footer in bootstrap--
<div class="footer navbar-fixed-bottom">
Another possibility is using position:fixed, without influencing the body css.
In that case the footer would be always at the bottom of the page event if a scrollbar is present
Example
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: fixed;
bottom: 0;
}
See fiddle
I have a HTML5 audio player in a div. I have set its width to 100%. I wanted to fix the player at the top when scrolled so I fixed it's position. The problem is when I do that, the player width overflows the container.
Below is my code.
HTML
<div id="container">
<audio arc="#" controls></audio>
</div>
CSS
#container {
width : 350px;
height: 300px;
background: #BADA55;
}
audio {
width: 100%;
/*position: fixed;*/
}
I created a fiddle to demonstrate the issue. Its currently in the state which I want it to look like. Un-comment the position: fixed; to see the problem.
Can anyone please tell me what I should do to make it stay fixed with the correct width?
Thanks
You can try with
width:inherit;
http://jsfiddle.net/vfQ5K/2/
Need to wrap the audio element and apply the css to the wrapper. I updated your jsfiddle.
<div id="container">
<div class="audioWrap">
<audio arc="#" controls></audio>
</div>
</div>
Then CSS:
#container {
width : 350px;
height: 300px;
background: #BADA55;
position: relative;
}
.audioWrap {
width: 100%;
position: fixed;
}
Note, if you are fixing it's position inside the container, you may want to add 'position: relative' to the container. I went ahead and added that to the jsfiddle.
Can someone tell me what I'm doing wrong here? I want my background image to travel to the end of it's div and not outside of it.
'rule-btm.png' is going outside of #wrap-content.
#wrap-page{
margin:auto; <-- This is to center the content on the page
min-width:1170px;
max-width:1280px;
}
#wrap-content{
margin:0 5px; <--This is for a margin around my content
}
#tagline:after {
background: url("rule-btm.png") repeat-x;
content: "";
float: left;
height: 7px;
max-width: 1280px;
min-width: 1170px;
}
I am just curious so I'll ask. Would it be correct for me to float both #wrap-page and #wrap-content left?
<div id="tagline">
<div></div>
<div>Test</div>
<div></div>
</div>
EDIT:
I noticed that if I remove the min/max-widths and replace it with just width, I can get the background to travel where it needs to be.
Anyone?
it's not Outside , It needs to be positioned
for example
background: url("rule-btm.png") top left repeat-x;
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 div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?