Any idea why the .story-text expands beyond the bounds of the container? I don't want to set overflow: hidden because it doesn't solve the issue that the padding is causing it to expand beyond the bounds (and the text would be flush up against the right edge of the container). Why isn't .story-text staying within the bounds of its parent and how do I get it to behave properly?
Fiddle: http://jsfiddle.net/csaltyj/yFpMH/
HTML:
<div id="story-container">
<div class="story">
<img src="http://www.westernjournalism.com/wp-content/uploads/2011/04/Barack-Obama-There-Might-Be-Chances-of-Further-Offshore-Drilling-Campaigns.jpg" />
<div class="story-text">
<h4>Obama is pointing at you!</h4>
<p>It is this very gaze, and this very pointed finger, that actually killed Osama bin Laden.</p>
</div>
</div>
<div class="story">
<img src="http://reason.com/assets/mc/jtaylor/rahm.jpg" />
</div>
</div>
CSS:
#story-container {
margin-top: 2em;
width: 300px;
height: 200px;
border: 1px solid #999;
position: relative;
}
.story {
position: absolute;
}
.story img {
width: 100%;
height: 100%;
}
.story-text {
background: rgba(0, 0, 0, 0.7);
color: #fff;
position: absolute;
/*top: 130px;*/
bottom: 0;
height: 45px;
width: 100%;
padding: 10px;
}
.story p {
font-size: 0.7em;
}
If you take out the width declaration for .story-text that should fix it.
Set the width of story text to 280px or just the container width - padding left - padding right. Demo here http://jsfiddle.net/yFpMH/6/
Related
I was wondering how I could make a div that I have fixed to the bottom right of my screen become unfixed once the page reaches the footer.
For example if my html is:
<div class="main" />
<div class="fixed" />
<div class="footer" />
And my css is:
.main {
height: 100vh;
background-color: aqua;
width: 100vw;
}
.fixed {
background-color: green;
height: 200px;
position: fixed;
bottom: 0px;
width: 200px;
}
.footer {
background-color: brown;
height: 300px;
width: 100vw;
}
I would like to have my fixed div in the bottom until the footer starts to be revealed and then have it scroll on top of the footer. Should I use sticky positioning? If so how do I do that? If not is there a better solution?
Thanks.
You can use position: sticky along with bottom: 0 to stick it to the bottom of the viewport (to answer your question of how). Since it's non-sticky location is right before the footer, it will rest naturally when the viewport reaches there.
body {
font-weight: bold;
font-size: 24px;
padding-bottom: 300px;
}
main * {
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
}
.content {
min-height: 1000px;
}
.sticky {
position: sticky;
/* the important part - stick to the bottom */
bottom: 0;
border: 1px solid red;
background-color: white;
}
<main>
<div class="content">content</div>
<div class="sticky">I'm sticky</div>
<footer>footer</footer>
</main>
That being said, as mentioned in the comment by Will - should you use it? That depends on what browsers you support. If you need to support older browsers, you'll need a fallback and/or JavaScript to handle the positioning.
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
Here is the code. I want the DIV.fixed-nav (position:fixed) to completely fit its parent DIV.container of which width may change. Is there a pure CSS solution for this?
CSS:
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #000000;
margin: 0 auto;
max-width: 600px;
min-width: 400px;
}
.fixed-nav {
background-color: red;
height: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
.content {
background-color: green;
height: 100px;
margin-top: 20px;
}
HTML:
<div class="container">
<div class="fixed-nav">
</div>
<div class="content">
</div>
</div>
Please check the DEMO.
The problem with fixed is that it will always be relative to the browser window. So if you set 100% height on your fixed container it will be 100% of the browser window.
The only way I could think of to achieve this is to use jQuery. Or if you don't need the menu to be fixed and it could be absolute then height 100% will work.
I would like to have a small red div with full width at a fixed top position, inside another div that has overflow: scroll. I hope the jsFiddle makes it clear: http://jsfiddle.net/mCYLm/2/.
The issue is that the red div is overlapping the scrollbar. I guess right: 0 means the right hand side of div.wrapper; it does not subtract the scrollbar of div.main. When I move the overflow: scroll into div.wrapper, then the red banner has the right size (fiddle). However, it is not at a fixed position anymore (scrolling down makes the banner scroll up).
How can I achieve the following two things together?
The red banner is at the fixed position like in this fiddle.
The red banner has full width except the scrollbar like in this fiddle.
I'd like to get this working in Google Chrome.
HTML:
<div class="wrapper">
<div class="red-banner"></div>
<div class="main">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>
</div>
CSS:
div.wrapper {
position: relative;
}
div.main {
height: 200px;
overflow-y: scroll;
}
div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
div.red-banner {
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
}
Seems like this isn't possible with pure CSS, so here's a JavaScript (jQuery) hack:
$(function() {
var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
var $child = $("<div>").css({ height: 2 }).appendTo($container);
window.SCROLLBAR_WIDTH = $container.width() - $child.width();
$container.remove();
});
then:
$("div.red-banner").css({
right: SCROLLBAR_WIDTH
});
HTML
<div class="scroller">
<div class="banner-wrapper">
<div class="banner"></div>
</div>
</div>
<div class="main">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>
CSS
* { margin: 0; padding: 0 }
body {
padding-top: 30px;
}
div.main {
height: 200px;
width: 100%;
overflow-y: scroll;
position: absolute;
z-index: 50;
background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));
}
div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
div.scroller {
height: 20px;
width: 100%;
position: absolute;
z-index: 100;
overflow: hidden;
}
div.banner-wrapper {
background: transparent;
position: relative;
height: 20px;
overflow-y: scroll;
left: 0;
margin-right: -20px;
}
div.banner {
height: 20px;
background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));;
margin-left: 20px;
margin-right: 40px;
}
Development version: http://jsfiddle.net/mCYLm/13/
Final version: http://jsfiddle.net/mCYLm/14/
Works with zooming and variable viewport width.
! BUG: Scrollbar button from the right top is not accessable/clickable.
Tested in:
IE6,7,8,9 (windows)
FF11 (Windows)
Google Chrome 18 (ubuntu)
Safari 5.1 (OSX)
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/