I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
Related
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
I have the following code:
HTML
<div class="container">
<div class="fixed-area">
<div class="content"></div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
html, body, body * {
z-index: 3;
}
div.container {
height: 100%;
position: relative;
background-color: #000000;
z-index: 1;
}
div.fixed-area {
position: relative;
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #ffff00;
}
div.content {
position: relative;
width: 600px;
height: 1500px;
margin: 0 auto;
background-color: #ff0000;
}
The container (black) and fixed-area (yellow) divs do not expand with the content div (red) to cover the scrollable area. When scrollbar is used to view the bottom part of the content, a white background takes the place of the container and fixed-area divs. How can make the container and fixed-area divs expand to cover all background of the content, even when scrolled down?
If .container should have a minimum height of 100%, but should grow with the .fixed-area container, use:
height: auto;
min-height: 100%;
See: http://jsfiddle.net/gopeter/B2Ljt/4/ (shows how min-height works) and http://jsfiddle.net/gopeter/B2Ljt/3/ (shows how .container grows with .fixed-area)
Change container height to auto
Change to your container to this CSS
div.container {
height: auto;
position: relative;
background-color: #000000;
z-index: 1;
}
You had to change your container's height to auto;
You made the container's height 100%, which you didn't want. Simply remove this style.
JSFiddle demo
I want an out put similar to this Image..!
following is what i've tried to do.JSfiddle
P.S: I cannot edit the structure of the content.
Since you can't edit the HTML, you can't use floating properly, which would be the perfect solution.
But then you can use absolute positioning:
div {
width: 500px;
min-height: 100px; /* image height */
position: relative;
text-align: justify;
}
img {
width:100px;
position: absolute;
top: 0;
right: 0;
}
p:first-child {
max-width: 400px; /* wrapper width - image width */
}
Demo
I have a pop up dialog with a list of items in it. I am trying to give the list of items a max-height relative to the overall height of the screen.
After some fiddling with the styles, it seems to me like it doesn't work when pop up dialog have max-height because it creates a cycle in the computation: The popup dialog's height depends on the height on the list of items, and the list of items max-height's depends on the popup dialog's height.
Please see the attached plunkr for an example: when #popup-container has max-height of 66%, the list of items (popup-content) has no max-height.
http://plnkr.co/edit/esdIMjvOgJ8hRM8mSk2t?p=preview
this seems to do the trick:
Entire CSS page:
/* Styles go here */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#popup-container {
position:fixed;
max-height: 66%;
border: 1px solid black;
width: 500px;
bottom: 0;
right: 0;
overflow: auto;
}
.popup-footer , .popup-header {
display: block;
background: #ccc;
height: 20px;
position: fixed;
width: 480px;
}
.popup-footer{
position: fixed;
bottom: 0;
}
The footer is a bit hacky though... i'm not sure yet how to work around that one.
I gave the header/footer a width so it doesnt go over the scrollbar :S
If you look at this fiddle: http://jsfiddle.net/bastien/PybrF/1/
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
}
#content {
top: 51px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
background-color: orange;
}
If you resize the window then the vertical scrollbar gets visible in the content div. BUT it gets only visible (so it seems for me...) when I have exceeded the height in pixel of the header while resizing the window.
How can I get the vertical scrollbar correctly?
UPDATE
I want a header which stays fixed.
I want a content which has inside scrollbars.
something like this: http://jsfiddle.net/bastien/PybrF/7/
but the vertical scrollbars should start inside the content div and not start at the header/body.
Try this in your css:
* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }
#header {
height: 50px;
background-color: yellow;
}
#content {
top: 50px;
height: 70%;
overflow-y: auto;
background-color: orange;
}
Will produce this:
As for the height of the content to use all the space left, I would to a js function wired to the resize event to set the height of the content to the page height minus the height of the header. I honestly don't know another solution for this.
Due to your use of fixed positioning and application of overflow settings, only the #content area will scroll.
Consider this:
1) Add the orange background color to the body element and remove its margins:
body {
margin:0px;
padding:0px;
background-color: orange;
overflow-x: hidden;
overflow-y: auto;
}
2) Position the other elements relatively:
#header {
position: relative;
height: 50px;
background-color: yellow;
}
#container {
position:relative;
}
http://jsfiddle.net/PybrF/6/
EDIT:
I'm still unclear on what you're looking for, but here's another method.
This one keeps the header fixed and puts the scrollbar inside the #content area.
body {
background-color: orange;
margin:0px;
}
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
z-index:1; /* keep the header on top of the content */
}
#content {
position:relative;
padding-top:50px; /* height of the header */
}
http://jsfiddle.net/PybrF/8/
ok I knew it must work:
Still found some old similar code and refactored it:
have fun! :)
Sorry for telling crap.
Remove the width/height percentage settings and use the left/right/bottom etc settings. Thats enough.
Forget about the main div which was from this other project long ago.
http://jsfiddle.net/bastien/PybrF/12/